Показать / скрыть категоризированные элементы с помощью CSS
Итак, я хочу создать галерею на веб-сайте, который не поддерживает Javascript, поэтому я не знал, как к этому подойти. Скажем, у меня есть четыре категории: эскизы, штриховые рисунки, закрашенные ячейки и раскрашенные. Я хочу, чтобы эти четыре кнопки были переключателями.
Затем я закодировал галерею так, чтобы все мои работы изначально отображались, и после нажатия одного из переключателей отображалось все, кроме подходящих работ.
Sketch | Sketch | Cell | Lineart
Lineart | Sketch | Cell | Sketch
Щелкните эскиз, и тогда четыре эскиза будут отображаться рядом. Также было бы здорово иметь возможность применять две разные категории для работы, на случай, если я изменю категории, так что некоторая помощь в том, как я могу применить две вещи (например, поместить мужчина и женщина в качестве категорий, а затем пометить изображение двумя знаками + люди как оба) также были бы оценены.
Этот был хорошим примером того, к чему я стремился, но он использует JS.
К сожалению, функции javascript занесены в черный список, потому что люди использовали их для внедрения вредоносных скриптов и тому подобного на этом сайте. Я подумал о том, чтобы просто переместить эту конкретную галерею в другое место, но, если мне это не нужно, это значительно упростит задачу, потому что все мои изображения уже размещены там.
Здравствуйте, я не думаю, что вы сможете сделать это, как в соответствии с это, поскольку стиль CSS будет применяться только тогда, когда мышь опущена, а не после.
Можно ли ссылаться на внешний скрипт, обслуживаемый через CDN? Если это так, JavaScript все еще возможен. В противном случае ответ, указанный ниже sburke0708, на первый взгляд кажется разумным выбором.
Ответы 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>
Привет, я хотел бы помочь вам здесь. Но мне нужна дополнительная информация. Почему именно вы не можете включить JavaScript на этом веб-сайте?