HTML / CSS Скрыть / показать объекты страницы без JavaScript Тумблер - PullRequest
Новая
       60

HTML / CSS Скрыть / показать объекты страницы без JavaScript Тумблер

1 голос
/ 27 мая 2020

Как использовать одну функцию для переключения нескольких кнопок / изображений. Вот что у меня есть для демонстрации. Он работает только для одной кнопки / изображений, но мне нужно сделать несколько элементов управления. 

body,
html {
  height: 100%;
}

#bg {
  background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
}

#menu {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 100;
}

#menu button {
  background-color: lightblue;
  border: 1px solid white;
  color: darkblue;
  padding: 10px 24px;
  cursor: pointer;
  display: block;
}

#mark01 {
  position: absolute;
  top: 240px;
  right: 490px;
  z-index: 80;
}

#mark02 {
  position: absolute;
  top: 480px;
  left: 460px;
  z-index: 80;
}

#mark03 {
  position: absolute;
  bottom: 260px;
  right: 490px;
  z-index: 80;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <title>Treasure Map</title>
</head>

<body>

  <div id="menu">
    <button onclick="myMark01()">Marker 1</button>
    <button onclick="myMark02()">Marker 2</button>
    <button onclick="myMark03()">Marker 3</button>
  </div>

  <div id="bg">
    <img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png">
    <img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png">
    <img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png">
  </div>

  <script>
    function myMark01() {
      var x = document.getElementById("mark01");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

    function myMark02() {
      var x = document.getElementById("mark02");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

    function myMark03() {
      var x = document.getElementById("mark03");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>

</html>

Я хочу сделать это с Pure HTML / CSS. Достижимо ли это или как сделать этот код более эффективным.

Так что в основном мне нужно, чтобы каждая кнопка управляла отдельным слоем изображения, позволяющим индивидуальное управление.

Спасибо,

Ответы [ 2 ]

2 голосов
/ 29 мая 2020

Это немного ограничено, но если вы можете использовать флажок и хотите получить чистое решение HTML и CSS, вы можете использовать селектор :checked CSS в качестве ссылки для ваши CSS правила для скрытия / отображения элементов всякий раз, когда установлен флажок. 

input:checked + .hidable {
  display: none;
}

input:not(:checked) + .showable {
  display: none;
}
<input type="checkbox" /> Hide text below
<div class="hidable">I am totally not hidden right now</div><br />

<input type="checkbox" /> Show some text below
<div class="showable">It seems I just got shown</div><br />

<input type="checkbox" /> Hide all the elements below, including image
<div class="hidable">
  <strong>many elements here</strong>
  <strong>hi</strong>
  <img src="https://vignette.wikia.nocookie.net/rickandmorty/images/4/41/Garmanarnar.PNG/revision/latest?cb=20160117000927" />
  <strong>bye</strong>
</div>

На самом деле, здесь есть очень хороший пример от MDN .

Если вы хотите изменить положение флажка по отношению к элементам, вы можете поиграть с селекторами, например nth-child, или вы можете использовать макет сетки - тогда вы можете установите флажок в любом месте шаблона сетки.

0 голосов
/ 29 мая 2020

Хорошо, вот модифицированный пример с использованием предоставленных вами советов. Спасибо 

body, html {
  height: 100%;
}

#bg {
  background-image: url(http://basicblue.biz/treasure/treasuremap_01.jpg);
  height: 100%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1080px 1080px;
  position: relative;
  }

  #menu {
    display: block;
    width: 100px;
  }

  input:checked + .hidable {
    display: none;
  }
  
  input:not(:checked) + .showable {
    display: none;
  }

  #mark01 {
    position: absolute;
    top: 240px;
    right: 490px;
  }

  #mark02 {
    position: absolute;
    top: 480px;
    left: 460px;
  }

  #mark03 {
    position: absolute;
    bottom: 260px;
    right: 490px;
  }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Treasure Map</title>
</head>
<body>

  <div id="bg">
    <div id="menu">
      <input type="checkbox" /> Marker 1
      <div class="showable"><img id="mark01" src="http://basicblue.biz/treasure/xmark_01.png" alt="X Mark Red"></div>
      <input type="checkbox" /> Marker 2
      <div class="showable"><img id="mark02" src="http://basicblue.biz/treasure/xmark_02.png" alt="X Mark Green"></div>
      <input type="checkbox" /> Marker 3
      <div class="showable"><img id="mark03" src="http://basicblue.biz/treasure/xmark_03.png" alt="X Mark Magenta"></div>
    </div>
  </div>

</body>
</html>

Это действительно прекрасно работает. Единственная проблема, с которой я сталкиваюсь, заключается в том, что мне нужно выяснить, как заблокировать фоновое изображение и сохранить метки, которые я включаю / выключаю, в соответствующие фиксированные положения. Каждый раз при изменении размера окна браузера все визуально ломается (есть какие-то советы?) ...

Ваши советы помогли и теперь чистые HTML / CSS.

Спасибо,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...