我有一个包含一组不同元素的容器。所有物品均采用颜色编码。只有三种颜色。每个元素都有一个样式类名称 ( class
),它允许您将每个元素与其所需的样式相关联。一般容器中的元素是不按颜色分组的,实际上是分散在里面的。在视觉上它看起来像这样:
这html
是css
代码:
body {overflow: hidden; width: 100%; margin: 0; text-align: center;}
.container {width: 100%; margin: 0 auto;}
.filter {
float: left; cursor: pointer; width: 23%;
margin: 0.5%; margin-bottom: 10px; padding: 0.5%;
background: white; text-align: center; color: black;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.item {
float: left; width: 23%; height: 20px; line-height: 20px;
margin: 0.5%; padding: 0.5%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
transition: all 1s;
}
.blue {background: deepskyblue;}
.red {background: orangered;}
.green {background: limegreen;}
<div class="container">
<div class="filter">Синий</div>
<div class="filter">Красный</div>
<div class="filter">Зеленый</div>
<div class="filter">Показать все</div>
<div class="item blue">1</div>
<div class="item red">2</div>
<div class="item blue">3</div>
<div class="item green">4</div>
<div class="item blue">5</div>
<div class="item red">6</div>
<div class="item red">7</div>
<div class="item green">8</div>
<div class="item blue">9</div>
<div class="item green">10</div>
<div class="item red">11</div>
<div class="item green">12</div>
<div class="item blue">13</div>
<div class="item blue">14</div>
<div class="item green">15</div>
<div class="item red">16</div>
</div>
问题:点击颜色名称时,如何过滤所有元素,只显示所选颜色的元素,隐藏所有其他元素?例如,当您单击“红色”时,它应如下所示:
对问题标签中指示的任何方式和技术的实施感兴趣。它可以是:CSS、jQuery、Native Script。
CSS 选项:
带有 JS 的选项,最好使它们更通用 - 与颜色数量无关。
jQuery 选项:
JavaScript 选项: