项目中经常会用到 tab 切换功能,有的还会有一个 更多 按钮,我们可以用下面这个方法实现一个多功能的 tab 切换。
效果图:不好看,请见谅。
HTML:
<div class="box">
<div class="cat-tab">
<span class="tab on">tab1</span>
<span class="tab">tab2</span>
<div class="more">
<a href="">更多a></a>
<a href="" style="display: none">更多b></a>
</div>
</div>
<ul class="list-box active">
<li>这是一段文字这是一段文字</li>
<li>这是一段文字这是一段文字</li>
<li>这是一段文字这是一段文字</li>
<li>这是一段文字这是一段文字</li>
<li>这是一段文字这是一段文字</li>
<li>这是一段文字这是一段文字</li>
</ul>
<ul class="list-box">
<li>这是一段文字这是一段文字2</li>
<li>这是一段文字这是一段文字2</li>
<li>这是一段文字这是一段文字2</li>
<li>这是一段文字这是一段文字2</li>
<li>这是一段文字这是一段文字2</li>
<li>这是一段文字这是一段文字2</li>
</ul>
</div>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box{
width: 500px;
margin: 20px auto;
background: #eee;
border: 1px solid #999;
}
.cat-tab{
padding-left: 10px;
height: 40px;
border-bottom: 3px solid #00b0f0;
}
.tab{
display: inline-block;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 10px;
float: left;
}
.tab.on{
background: #00b0f0;
color: #FFF;
}
.list-box{
list-style: none;
padding: 10px;
display: none;
}
.list-box.active{
display: block;
}
.list-box li{
line-height: 26px;
}
.more{
float: right;
padding-top: 10px;
padding-right: 10px;
}
.more a{
text-decoration: none;
color: #666;
}
JS:注意需要jQuery支持
$(document).ready(function () {
var $tab_li = $('.cat-tab .tab');
$tab_li.click(function () {
$(this).addClass('on').siblings().removeClass('on');
var index = $tab_li.index(this);
$('.list-box').eq(index).addClass("active").siblings().removeClass("active");
$('.more a').eq(index).show().siblings().hide();
});
});
siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
语法:
.siblings(selector)
实例:
$("p").siblings(".selected")