这个CSS3 Tab样式已经写出来很久了，一直没有时间把它分享出来，也许网上还有其他很多这样子的代码，但没有一种是用到我说的:checked来做的，不管如何，多掌握一种方式对你也是有帮助的。 效果就如博客之前写过的一个Tab一样：有最新文章、热门文章和随机文章。
第一种：:checked
首先像平常写HTML和CSS一样，不过要使用input的radio来做为点击后选择的内容。通过input:checked来隐藏和显示需要对应的内容。 HTML代码如下：
<div class="widget widget-tab"> <input type="radio" name="widget-tab" id="new" checked="checked"/> <input type="radio" name="widget-tab" id="hot"/> <input type="radio" name="widget-tab" id="random"/> <div class="widget-title inline-block"> <ul> <li class="new"> <label for="new">最新博文</label> </li> <li class="hot"> <label for="hot">热评博文</label> </li> <li class="random"> <label for="random">随机博文</label> </li> </ul> </div> <div class="widget-box"> <ul class="new-list"> <li>……</li> </ul> <ul class="hot-list"> <li>……</li> </ul> <ul class="random-list"> <li>……</li> </ul> </div> </div>
注意点：有几个标签页，就需要对应添加几个input，同时每个input的name必须设置为一致，同时这些input必须放在最前面，通过选择后来使用CSS3的同级元素链接符来改变样式。而Tab里面的“最新博文、热评博文、随机博文”都要用label包围起来，配上相对应的for. CSS代码如下：
.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#F7F7F7}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}
作者：小屋
链接：http://www.rumenwu.com/site/1586.html
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 