多tab切换标签 | 通用js代码

目的：通用js代码整理，本次抽出常用的tab切换js特效，实例包含一级、二级分类。

代码：

HTML：

<ul class="main-ul">
     <li class="in">主一</li>
     <li>主二</li>
</ul>
<div class="main-tab">
<ul class="sub-ul">
     <li class="on">一A</li>
     <li>一B</li>
     <li>一C</li>
</ul>
<div class="sub-tab">我是一A：11111</div>
<div class="sub-tab dn">我是一B：2222</div>
<div class="sub-tab dn">我是一C：3333</div>
</div>
<div class="main-tab dn">
<ul class="sub-ul">
     <li class="on">二A</li>
     <li>二B</li>
     <li>二C</li>
</ul>
<div class="sub-tab">我是二A：4444</div>
<div class="sub-tab dn">我是二B：5555</div>
<div class="sub-tab dn">我是二C：6666</div>
</div>

CSS:

ul{
list-style-type:none;
display:flex;
width:300px;
}
li{
border:1px solid;
text-align:center;
padding:1%;
flex:1;
}

.on{background: #FFE4B5;}
.in{background: #AEEEEE;}

.dn{display:none;}

JS:(需引入jQuery)

$(function(){
$(".main-ul li").click(function(){
var index = $(this).index();

$(this).addClass("in").siblings("li").removeClass("in");
var $maintab = $(this).parent().siblings(".main-tab").eq(index);
$maintab.show().siblings(".main-tab").hide();
});
$(".sub-ul li").click(function(){
var index = $(this).index();

$(this).addClass("on").siblings("li").removeClass("on");
var $subtab = $(this).parent().siblings(".sub-tab").eq(index);
$subtab.show().siblings(".sub-tab").hide();
});
})