专栏首页前端资源一个tab切换的方法 siblings()

一个tab切换的方法 siblings()

项目中经常会用到 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")

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享一个纯CSS样式,显示不同颜色数字的排行榜列表

    声明:本文由w3h5原创,转载请注明出处:《分享一个纯CSS样式,显示不同颜色数字的排行榜列表》 https://www.w3h5.com/post/241.h...

    德顺
  • li、img等元素设置inline-block后的空白间距问题

    关于使用 inline-block 来代替 float 的讨论也挺多的,最常见的就是使用 inline-block 来代替 float 进行布局。

    德顺
  • 一个纯HTML+CSS写的下拉导航动画

    动画效果大概是鼠标放上去之后,从下往上慢慢提起来。比较重要是属性是“visibility”,才发现visibility可以这么用...

    德顺
  • 谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

    Sb_Coco
  • Python之路--->list、元组、字典

      接下来我要记录下最近学的list、元组、字典相关的知识点,望各位大神给予指导!

    用户5745385
  • 3.列表-HTML基础

    到现在为止,我们学习了很多标签,但是由于不熟悉标签的语义化,有时我们可能会用别的标签代替另一个标签,从而实现相同的效果,但这是一种错误的思想。

    见贤思齊
  • Cypress学习12-父子元素定位

    若要在元素中获取所有下一个同级DOM元素,直到另一个元素,请使用.next until()命令。

    上海-悠悠
  • Pug迭代

    听着music睡
  • pyhon 列表的增删改查

    py3study

扫码关注云+社区

领取腾讯云代金券