2022-06-09 jQuery案例:选项卡(顶部选项和底部内容的同步切换)

前端OnTheRun

已于 2022-11-02 12:07:51 修改

阅读量100

点赞数

分类专栏： jQuery 项目与应用文章标签： javascript jquery jq 选项卡

于 2022-06-09 20:39:03 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/125210625

版权

项目与应用同时被 2 个专栏收录

57 篇文章 1 订阅

订阅专栏

jQuery

16 篇文章 1 订阅

订阅专栏

本文介绍了一种原生JavaScript实现选项卡切换的方法。通过监听鼠标点击事件，动态添加和移除active类来切换顶部选项卡的样式，并根据选中项的索引显示对应的底部内容。代码中使用了CSS来定义样式，使得选中状态有明显视觉反馈。这种实现方式对于理解和掌握前端基础交互很有帮助。

摘要由CSDN通过智能技术生成

原生js选项卡:2021-06-24 css选项卡的实现

思路

在鼠标点击事件中,为当前鼠标选中的li添加active类(含有选中的样式),
获取此li的索引
利用此索引,显示对应的第index个底部box li内容

代码

<style>
    li {
        list-style-type: none;
    }
    
    .header {
        display: flex;
    }
    
    .header li {
        width: 98px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #000;
        background: pink;
    }
    
    .box li {
        width: 500px;
        height: 200px;
        background: yellow;
        display: none;
    }
    
    .header .active {
        background: red;
    }
    
    .box .active {
        display: block;
    }
</style>

<body>
    <div class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </div>
    <div class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </div>
    <script>
        $(".header>li").click(function() {
            // 为当前选中的li添加类,同时为其兄弟节点删除类
            $(this).addClass("active").siblings().removeClass("active");
            // 获取当前选中li的索引
            // console.log($(this).index());
            // 用获取到的索引,显示对应的.box>li,并隐藏其兄弟节点
            $(".box>li").eq($(this).index()).css("display", "block").siblings().css("display", "none");
            //实现顶部选项卡和底部内容栏的同步切换
        })
    </script>
</body>