教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单选框原理 关于模拟单选框,在我之前文章中有讲到,详情请戳→ 纯CSS模拟单选框和复选框 该方法大致原理如下: 当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都加上相应的样式。 具体如何实现呢?请耐心往下看... 1. HTML结构 <!--HTML--> <ul> <li> <input id="tab1" type="radio" name="tab" checked> <label for="tab1">选项一</label> <div class="content">选项一内容</div> </li> <li> <input id="tab2" type="radio" name="tab"> <label for="tab2">选项二</label> <div class="content">选项二内容</div> </li> <li> <input id="tab3" type="radio" name="tab"> <label for="tab3">选项三<