Question

我在我的网站上使用内容过滤器，基于this Codepen example。我将它用于团队成员及其部门。有人属于2个部门。我为这个人添加了两个类，但现在它只在没有激活过滤器时显示。例如，如果我将类“blue”和“red”添加到第一个元素，它会在第一次加载网站时显示，但不会在我尝试按“蓝色”或“红色”过滤时显示。

<div class="container"> 
    <input type="radio" id="blue" name="color" />
    <label for="blue">BLUE</label>
    <input type="radio" id="red" name="color"/>
    <label for="red">RED</label>
    <input type="radio" id="green" name="color"/>
    <label for="green">GREEN</label>
    <input type="radio" id="reset" name="color"/>
    <label for="reset">RESET</label>

    <div class="tile blue red">1</div>
    <div class="tile red">2</div>
    <div class="tile blue">3</div>
    <div class="tile green">4</div>
    <div class="tile blue">5</div>
    <div class="tile red">6</div>
    <div class="tile red">7</div>
    <div class="tile green">8</div>
    <div class="tile blue">9</div>
    <div class="tile green">10</div>
    <div class="tile red">11</div>
    <div class="tile green">12</div>
    <div class="tile blue">13</div>
    <div class="tile blue">14</div>
    <div class="tile green">15</div>
    <div class="tile red">16</div>
</div>

我的CSS中有什么变化？

.container {
  width:90%;
  margin:0 auto;
}
input[type="radio"] {
    display:none;
}
label {
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}
input[type="radio"][id="blue"]:checked + label {
  background:#6666ff;
}
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="red"]:checked + label {
  background:#ff4466;
}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="green"]:checked + label {
  background:#66dd99;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {
  width:23%;
  height:100px;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
}
.green {
  background:#66dd99;
}
.blue {
  background:#6666ff;
}
.red {
  background:#ff4466;
}

谢谢你！

Answer 1

这是我的演示：

＆＃13;

body {
  margin: 0;
  text-align: center;
  font-family: Verdana;
  background: #f5f5f5;
}
h1 {
  text-align: center;
}
.container {
  width: 90%;
  margin: 0 auto;
}
input[type="radio"] {
  display: none;
}
label {
  width: 23%;
  float: left;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #222222;
  padding: 0.5%;
  margin: 0.5%;
  margin-bottom: 30px;
  cursor: pointer;
}
input[type="radio"][id="blue"]:checked + label {
  background: #6666ff;
}
input[type="radio"][id="blue"]:checked ~ .blue {
  width: 23%;
  height: 100px;
  margin: 0.5%;
  padding: 0.5%;
  opacity: 1;
  background: #6666ff;
}
input[type="radio"][id="red"]:checked + label {
  background: #ff4466;
}
input[type="radio"][id="red"]:checked ~ .red {
  width: 23%;
  height: 100px;
  margin: 0.5%;
  padding: 0.5%;
  opacity: 1;
  background: #ff4466;
}
input[type="radio"][id="green"]:checked + label {
  background: #66dd99;
}
input[type="radio"][id="green"]:checked ~ .green {
  width: 23%;
  height: 100px;
  margin: 0.5%;
  padding: 0.5%;
  opacity: 1;
  background: #66dd99;
}

input[type="radio"][id="reset"]:checked ~ .green,
input[type="radio"][id="reset"]:checked ~ .red,
input[type="radio"][id="reset"]:checked ~ .blue
{
  width: 23%;
  height: 100px;
  margin: 0.5%;
  padding: 0.5%;
  opacity: 1;
}

.tile {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  float: left;
  transition: all 1s;
}
.green {
  background: #66dd99;
}
.blue {
  background: #6666ff;
}
.red {
  background: #ff4466;
}

＆＃13;

<h1>FILTER BY COLOR</h1>
<div class="container">
  <input type="radio" id="blue" name="color" />
  <label for="blue">BLUE</label>
  <input type="radio" id="red" name="color" />
  <label for="red">RED</label>
  <input type="radio" id="green" name="color" />
  <label for="green">GREEN</label>
  <input type="radio" id="reset" checked name="color" />
  <label for="reset">RESET</label>

  <div class="tile blue red">1</div>
  <div class="tile red green">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
  <div class="tile blue">5</div>
  <div class="tile red">6</div>
  <div class="tile red">7</div>
  <div class="tile green">8</div>
  <div class="tile blue">9</div>
  <div class="tile green">10</div>
  <div class="tile red">11</div>
  <div class="tile green">12</div>
  <div class="tile blue">13</div>
  <div class="tile blue">14</div>
  <div class="tile green">15</div>
  <div class="tile red">16</div>
</div>

＆＃13;

CSS内容过滤器 - 添加多个类别

1 个答案: