一个tab切换的方法 siblings()

德顺

发布于 2019-11-13 17:19:25

7110

发布于 2019-11-13 17:19:25

文章被收录于专栏：前端资源

项目中经常会用到 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() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。

语法：