尝试在同一页面上使用CSS多复选框攻击

我试图利用CSS复选框来切换一个页面的多个部分的Display:None和Display:Block。我有图像库集按年份分割并开始隐藏，并且希望能够单击年份切换特定库的显示。我的重点是每当我点击一个标签时，它下面的所有东西都会切换，而不仅仅是我试图切换的标签中包含的部分

这是我到目前为止所拥有的

CSS代码

.hide {
    display:none;
}

input[type=checkbox] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

input[type=checkbox]:checked ~ .hide {
    display:block;
}

label {
    display: block;
    background: white;
    padding: 5px;
    border: 0px solid rgba(0,0,0,.1);
    border-radius: 2px;
    color: black;
    font-weight: bold;
}

还有HTML

<input type="checkbox" id="toggle_2012">
<label for="toggle_2012">2012</label><br>
<div class="hide">
<a class="fancybox" rel="2012" href="imgs/fb/3_b.jpg"><img src="imgs/fb/3_s.jpg" alt="Image 3"/></a> 
<a class="fancybox" rel="2012" href="imgs/fb/4_b.jpg"><img src="imgs/fb/4_s.jpg" alt="Image 4"/></a> 
</div>

<input type="checkbox" id="toggle_2013">
<label for="toggle_2013">2013</label><br>
<div class="hide">
<a class="fancybox" rel="2013" href="imgs/fb/1_b.jpg"><img src="imgs/fb/1_s.jpg" alt="Image 1"/></a>
<a class="fancybox" rel="2013" href="imgs/fb/2_b.jpg"><img src="imgs/fb/2_s.jpg" alt="Image 2"/></a> 
</div>  

2012年

2013年

（Jquery/Fancybox用于显示图像，这就是为什么它们被归类为Fancybox的原因）

任何帮助都将不胜感激。这是我第一次使用checkbox hack，但据我所知，为输入/标签设置唯一ID应该是可行的。不知道我错过了什么

---

提前感谢。

这几个月过去了，也许你现在已经找到了解决方案，但为了让找到这条线索的人受益，这是我的解决方案。首先，您给复选框一个ID是正确的（类在某些情况下也可以工作），但是您必须在CSS中实际引用该ID

而不是：

input[type=checkbox]:checked ~ .hide {
    display:block;
}

试试这个：

#toggle_2013:checked ~ .hide {
    display:block;
}

在CSS和HTML中没有明确标识复选框，DOM中第一个合适的复选框将被激活，而不是您想要的复选框

希望这能有所帮助。

您的类会影响到该类的以下每个元素。尝试：

input[type=checkbox]:checked + label + .hide

---

您可能必须删除

才能使其正常工作。

避免硬编码到ID的聪明方法+1.