纯CSS实现tab切换

作者: shisaq 日期: January 20, 2016

纯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>}tab

{<2>}tab