纯CSS实现tab切换
转自：纯CSS实现tab切换
tab切换的核心就是找出被选中的元素，显示与之对应的内容显示，这一过程可以方便的用js实现，但用纯CSS实现显得更加简洁。
CSS虽然无法知道一个元素要对应的显示内容，但配合input元素CSS就可以知道那个元素被选中了。纯CSS实现tab切换的原理就是：
当一个type为radio的input元素被选中时，使用:checked选择符可以知道是哪个radio被选中了，这时可以使用+选择符选中这个被点击元素的相邻元素，并将它显示，以模拟按钮对应内容的显示与隐藏，这就完成了tab切换的模拟，下面是实现代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html lang="en"> <head> <title>css</title> <style> /*选中被点击的input的相邻元素，完成被点击后对应内容出现的功能。*/ input:checked + .tabinfo { display: block; } /*选中被点击的input的元素的label，高亮显示*/ input:checked ~ label{ color: red; } /*将内容显示区域及input元素隐藏，内容显示区域将在对应input被点击后显示*/ .tabinfo, .tabradio{ display: none; } .tabbox{ position: relative; padding-top: 20px; border: 1px solid #bfbfbf; } label{ position: absolute; top: 0; left: 0px; } label[for="hehe"]{ left: 30px; } </style> </head> <body> <div class="tabbox"> <div> <input type="radio" class="tabradio" id="lala" name="tab" checked="true"> <div class="tabinfo">lalala</div> <label for="lala">lala</label> </div> <div> <input type="radio" class="tabradio" id="hehe" name="tab"> <div class="tabinfo">hehehe</div> <label for="hehe">hehe</label> </div> </div> </body> </html> |
纯CSS实现tab切换之二
前一篇说到了使用:checked伪类来实现切换tab，还有一种纯CSS切换tab的方法，就是使用:target伪类，使用:target实现切换tab相比前一种结构上简单，只需div和a就能实现。这种实现方法的核心在于:target伪类，他能选择a指向的元素（比如#aaa就是指向id为aaa的元素）。
下面是实现代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <title>css</title> <style> /*所有tab都隐藏*/ .tab{ display: none; } /*当a被点击后，a指向的元素取消隐藏*/ .tab:target{ display: block; border: 1px solid #bfbfbf; } </style> </head> <body> <a href="#a">aaa</a> <a href="#b">bbb</a> <div class="tabbox"> <div id="a" class="tab">aaa</div> <div id="b" class="tab">bbb</div> </div> </body> </html> |
{<1>}
{<2>}
