从外部Div触发CSS过滤器

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

我为我的无能事先道歉。谢谢

css:

html:

蓝-红-绿-黄marda toby重置
蓝色
红色
绿色
黄色的
马尔达
托比
重置


1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19

JS:

$（'a'）。在（'click'，function（）上{
if（$（'#menu'）.css（'right'）=='0px'）{
$（“#菜单”）.animate（{right:'-30%}，1000）；
}否则{
$（'#menu'）。设置动画（{right:0}，1000）；
}
});

#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 {
}

<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>

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