效果如之前写过的一个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}

第二种：:target

前面说过CSS3的动画制作方式有两种分别是:target和:checked一样，这个tab同样可以用:target来实现，不过实现起来比用:checked相比，体验差了很多，因为它点击了锚点，从而让链接也发生了跳转，给人一种很突然的感觉。思路是通过点击:target时令对应的z-index变大，重复覆盖在上一层。 HTML代码

<div class="tab-wrap">
        <div class="tab-title" id="tabTitle">
                <ul class="clearfix">
                        <li><a href="#tab1">最新文章</a></li>
                        <li><a href="#tab2">热门文章</a></li>
                        <li><a href="#tab3">随机文章</a></li>
                </ul>
        </div>
        <div class="tab-content">
                <ul id="tab1">
                        <li>……</li>
                </ul>
                <ul id="tab2">
                        <li>……</li>
                </ul>
                <ul id="tab3">
                        <li>……</li>
                </ul>
        </div>
</div>

CSS代码

.tab-content{position: relative; min-height:200px; border:1px solid #ddd; margin-top:-1px;}

.tab-content ul{position: absolute; min-height: 100px; left:0; top:1px; padding:10px; background: #fff;}

#tab1:target, #tab2:target, #tab3:target{z-index: 1;}

注意点：如果要实现点击时标题的active状态发生变化，则要将标题放在内容的后面，显示很不符合HTML的思路。所以个人推荐使用:checked来使用，不但简单，符合语义，而且不需要考虑CSS定位引起的问题。