show/hide 个分类为 css 的项目

Question

所以，我想在不允许 Javascript 的网站上创建一个画廊，所以我不确定如何处理这个问题。假设我有四个类别：草图、线稿、单元格阴影和彩绘。我希望这四个成为切换按钮。

然后，我会对画廊进行编码，以便所有我的作品最初都会显示，一旦点击其中一个开关，适用作品以外的所有内容都会显示。

点击素描，四个素描就会并排显示。能够应用两个不同的类别来工作也很好，以防我更改类别，所以一些关于如何应用两个东西的帮助（比如，将男性和女性作为类别，然后用两个+标记图片两者兼而有之的人）也将不胜感激。

This 是我想要的一个很好的例子，但它使用了 JS。

Answer 1

给你@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

show/hide 个分类为 css 的项目

show/hide categorized items with css

html

css

show-hide

categorization