Question

致力于实现这个纯CSS的内容过滤系统，但我愿意实现jquery或js以使这个功能更加干净。目前有一个div从页面侧面滑入。理想情况下，此div将具有过滤页面上内容的控件。我发现的过滤功能似乎只在标签和瓷砖位于同一容器中时才有效。我想使用此div内部的链接来触发相同的过滤事件。我希望这很清楚;基本上我希望所有这些标签链接都在幻灯片div“#menu”内;如果可能的话，完全替换页面正文中的那些。

我提前为我的无知而道歉。谢谢！

css：

#menu {
top: 60px;
text-align: center;
height: 500px;
position: fixed;
width: 300px;
right: -300px;
{

   .container {
  padding-top: 60px;
  width:100%;
  margin: 0 auto;
  text-align: center;
}

input[type="radio"] {
display:none;
}
label {
  width:12%;
  text-align:center;
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
 cursor:pointer;
}
input[type="radio"][id="blue"]:checked + label {color:#6666ff;
}
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green, input[type="radio"][id="blue"]:checked ~ .yellow {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="red"]:checked + label {color:#ff4466;
}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green, input[type="radio"][id="red"]:checked ~ .yellow {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="green"]:checked + label {color:green;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red, input[type="radio"][id="green"]:checked ~ .yellow {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="yellow"]:checked + label {
  color:yellow;
}
input[type="radio"][id="yellow"]:checked ~ .blue, input[type="radio"][id="yellow"]:checked ~ .red, input[type="radio"][id="yellow"]:checked ~ .green {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="toby"]:checked + label {color:purple;
}
input[type="radio"][id="toby"]:checked ~ .marda {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

input[type="radio"][id="marda"]:checked + label {color:orange;
}
input[type="radio"][id="marda"]:checked ~ .toby {
  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;
}
.yellow {
    background: yellow;
}
.marda {
}
.toby {
}

HTML：

<div id="menu">
blue red green yellow marda toby reset
</div>
<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="yellow" name="color"/>
  <label for="yellow">YELLOW</label>
  <input type="radio" id="marda" name="color"/>
  <label for="marda">MARDA</label>
  <input type="radio" id="toby" name="color"/>
  <label for="toby">TOBY</label>
  <input type="radio" id="reset" name="color"/>
  <label for="reset">RESET</label><br><br>

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

</div>

JS：

<script>
  $('a').on('click',function() {
    if($('#menu').css('right')=='0px'){
        $('#menu').animate({right: '-30%'}, 1000);        
    }else{
        $('#menu').animate({right:0}, 1000); 
    }
});
  </script>

从外部Div触发CSS过滤器

0 个答案: