tab选项卡-2句话解决

最新推荐文章于 2022-07-07 14:44:48 发布

小女子的博客

最新推荐文章于 2022-07-07 14:44:48 发布

阅读量277

点赞数

分类专栏： web前端/js 文章标签：选项卡 javascript

本文链接：https://blog.csdn.net/liuian1946/article/details/61196872

版权

web前端/js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

想起刚开始学js 的时候会一个选项卡感觉已经很厉害给大家整理一段非常简单的选项卡

1.下面是css

  	.nav-tab{width: 100%;overflow: auto;}
        .nav-tab span{float: left;text-align: center; padding: 20px 0; display: inline-block;width: 33.33%;border-bottom: 2px solid #dce0e0; }
        .nav-tab .selected{color: #28A4B0;border-bottom: 2px solid #28A4B0; }
        .content{display: none}
        .content.active{display: block}

2.html

<div class="nav-tab">
    <span class="selected">12</span>
    <span>34</span>
    <span>56</span>
</div>
<div>
    <div class="content active" style="width: 100%;height: 50px;background-color: pink">qwe</div>
    <div class="content"  style="width: 100%;height: 50px;background-color: #fcffa9">asd</div>
    <div class="content"  style="width: 100%;height: 50px;background-color: #ffccb2">asd</div>
</div>

3.js

$(".nav-tab span").on("click",function(){
        $(".content").eq($(this).index()).addClass("active").siblings().removeClass("active")
        $(this).addClass("selected").siblings().removeClass("selected");
    })

4.解析：让显示的内容根据点击的索引改变显示的内容

5.注意：记得引入jquery哦