TAB选项卡是一个非常不错可以在同样大小的空间中放更多的内容了，现在我们看很多门户网站都有这个功能，可能大家见得最多的就是QQ弹窗了，有很多的分类可以进行切换的哦。

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}