前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个tab切换的方法 siblings()

一个tab切换的方法 siblings()

作者头像
德顺
发布2019-11-13 17:19:25
7110
发布2019-11-13 17:19:25
举报
文章被收录于专栏:前端资源

项目中经常会用到 tab 切换功能,有的还会有一个 更多 按钮,我们可以用下面这个方法实现一个多功能的 tab 切换。

效果图:不好看,请见谅。

001.gif 一个tab切换的方法 siblings() 经验总结
001.gif 一个tab切换的方法 siblings() 经验总结

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
*{
    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支持

代码语言:javascript
复制
$(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() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

语法:

代码语言:javascript
复制
.siblings(selector)

 实例:

代码语言:javascript
复制
$("p").siblings(".selected")
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-25),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档