css tab选项卡特效

CSS选项卡特效是非常常见的界面设计效果，而要实现这种效果极为简单，只需要使用CSS即可。下面来介绍一下相关的代码及实现方法。

HTML代码：
<div class="tab">
    <ul class="tab-nav">
        <li class="active">选项卡1</li>
        <li>选项卡2</li>
        <li>选项卡3</li>
    </ul>
    <div class="tab-content">
        <div class="active">这是选项卡1的内容</div>
        <div>这是选项卡2的内容</div>
        <div>这是选项卡3的内容</div>
    </div>
</div>

CSS代码：
.tab{
    border: 1px solid #ccc;
    padding: 10px;
}
.tab-nav li{
    display: inline-block;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 5px 10px;
    cursor: pointer;
}
.tab-nav li.active{
    background-color: #f2f2f2;
}
.tab-content div{
    display: none;
    padding: 10px;
}
.tab-content div.active{
    display: block;
}

JavaScript代码：
jQuery(document).ready(function(){
    jQuery(".tab-nav li").on("click",function(){
        var index = jQuery(this).index();
        jQuery(".tab-nav li").removeClass("active");
        jQuery(this).addClass("active");
        jQuery(".tab-content div").removeClass("active");
        jQuery(".tab-content div").eq(index).addClass("active");
    });
});

在HTML代码中，我们首先定义了一个包含选项卡头和内容的div容器，并且在其中嵌套了ul和div标签。ul标签用于存放选项卡头，其中的li标签则是选项卡的标题内容，div标签则是选项卡的详细内容。

CSS代码则是用来控制容器和选项卡的样式。其中.tab样式表示容器样式，.tab-nav样式表示选项卡头部分的样式，.tab-content样式表示选项卡内容部分的样式。而在.active样式中，我们设置了选中状态下的样式。

最后，JavaScript代码中我们绑定了一个点击事件，当点击某个选项卡头时，使用jQuery代码获取当前选项卡索引，然后根据索引控制显示或隐藏对应的内容。