показать / скрыть категоризированные элементы с помощью css - PullRequest
Новая
       41

показать / скрыть категоризированные элементы с помощью css

0 голосов
/ 16 ноября 2018

Итак, я хочу создать галерею на веб-сайте, которая не поддерживает Javascript, поэтому я не был уверен, как к этому подойти.Скажем, у меня есть четыре категории: Эскизы, Lineart, Cell Shaded и Painted.Я хочу, чтобы эти четыре были кнопками переключения.

Затем я закодировал бы галерею так, чтобы все мои работы первоначально показывались, и как только один из переключателей был нажат, все, кроме применимыхРаботы покажутся.

Sketch | Sketch | Cell | Lineart Lineart | Sketch | Cell | Sketch

Нажмите эскиз, и тогда у него будет четыре эскиза, показанные рядом.Также было бы уместно иметь возможность применять две разные категории к работе, в случае, если я изменю категории, так что некоторая помощь в том, как я могу применить две вещи (например, обозначение мужчин и женщин в качестве категорий, а затем пометить картинку двумя +люди как оба) также будут оценены.

Этот был хорошим примером того, к чему я стремился, но он использует JS.

1 Ответ

0 голосов
/ 16 ноября 2018

Вот, пожалуйста @Tasuya Suou.Надеюсь, это поможет вам.Я использовал общий селектор ~.Вы можете прочитать больше об этом здесь.https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors.

p {
  display: none;
}

input[value="fruit"]:checked~p.fruit,
input[value="veg"]:checked~p.veg,
input[value="nuts"]:checked~p.nuts,
input[value="drink"]:checked~p.drink {
  display: block;
}

input:checked+label {
  color: blue;
}
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="style/css" href="./index.css" />
</head>

<body>
  <input type="radio" id="fruit" name="product" value="fruit" />
  <label for="fruit">Fruit</label>
  <input type="radio" id="veg" name="product" value="veg" checked />
  <label for="veg">Veg</label>
  <input type="radio" id="nuts" name="product" value="nuts" />
  <label for="nuts">Nuts</label>
  <input type="radio" id="drink" name="product" value="drink" />
  <label for="drink">Drink</label>

  <p class="fruit veg nuts drink">Product 1</p>
  <p class="drink">Product 2</p>
  <p class="veg nuts drink">Product 3</p>
  <p class="veg nuts">Product 4</p>
</body>

</html>

https://codesandbox.io/s/48y9o68oz7

...