2021-07-16

最新推荐文章于 2021-07-28 19:42:37 发布

Mystery_Fan

最新推荐文章于 2021-07-28 19:42:37 发布

阅读量81

点赞数

分类专栏： js

原文链接：https://www.cnblogs.com/zcy9838/p/12990334.html

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何使用JavaScript实现网页中的tab选项卡切换功能。通过点击li元素，动态添加和移除'current'类来高亮当前选中项，并根据点击的li索引显示对应的内容区域，实现了内容的动态显示和隐藏。涉及到的技术点包括DOM操作、事件监听和CSS样式控制。

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

tab选项卡切换

<div class="tab_list">
    <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>商品评价（50000）</li>
        <li>售后保障</li>
        <li>手机社区</li>
    </ul>
</div>    
<div class="detail_tab_con" style="display: block;">
    <div class="item">与商品介绍的内容相对应</div>
    <div class="item">与规格与包装的内容相对应</div>
    <div class="item">与商品评价（50000）的内容相对应</div>
    <div class="item">与售后保障的内容相对应</div>
    <div class="item">与手机社区的内容相对应</div>
</div>

<script>
    $(function() {
        // 1. 点击上面的li，当前li添加current类，其余兄弟移除类
        $(".tab_list li").click(function() {
            // 链式编程操作
            $(this).addClass("current").siblings().removeClass("current");
        　　 // 2. 点击的同时，得到当前li的索引号
        　　 var index = $(this).index();
        　　 console.log(index);
        　　 // 3. 让下面内容区相应索引号的item显示，其余item隐藏
        　　 $(".tab_con .item").eq(index).show().siblings().hide();
        });
    });
</script>