此文章是由jquery学堂8群（39589851）的网友【广东-前端-smile】提供，功能5行jquery代码实现通用选项卡特效功能，主要的也只有3行代码，用到index索引来实现的，这样的话在页面重复使用也不会受到影响，非常实用。。。
jquery功能代码部分主要以下3点：
1、设置选择当前点击项，添加.on类，并选择同级元素，删除.on类
2、定义index变量 ,获取当前点击的li在.menu li这个选择器选择到的li中的位置
3、.main 下面的 div中索引位置等于index的本身显示 其他的隐藏
用法：
一、脚本部分：
1、引入jquery核心库
2、在页面加载事件中写以下5行jquery代码：
$(".menu li").click(function(){
$(this).addClass("on").siblings().removeClass("on");
var index = $(".menu>li").index($(this));
$(".main>div:eq("+index+")").show().siblings().hide();
});
二、样式部分：
.menu {
float:left;
list-style-type:none;
height:30px;
line-height:30px;
border-right:solid 1px #ccc;
float:left;
padding:0;
margin:0;
}
.menu li {
float:left;
width:100px;
text-align:center;
border:solid 1px #ccc;
border-right:none;
cursor:pointer;
}
.main {
float:left;
clear:left;
margin-bottom:20px;
}
.menu .on {
border-top:solid 1px #a40000;
border-bottom:solid 1px #fff;
}
.tab {
height:200px;
width:403px;
float:left;
clear:both;
border:solid 1px #ccc;
border-top:none;
line-height:200px;
text-align:center;
}
三、HMTL结构部分：
<ul class="menu">
<li class="on">AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
<div class="main">
<div class="tab">AAA</div>
<div class="tab" style="display:none;">BBB</div>
<div class="tab" style="display:none;">CCC</div>
<div class="tab" style="display:none;">DDD</div>
</div>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery 选项卡 jquery选项卡 tab 网友smile