js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个

爬楼梯的小新

已于 2023-02-21 16:00:09 修改

阅读量2.7k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2021-07-29 17:31:15 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/119215765

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

思路：首先创建好导航栏样式给第一个li和和第一个盒子里的内容默认写上css 后续再点击其他li的时候可以使用js清楚默认li的样式

html和css：

<body>
    <div class="tab">
        <div class="list">
            <ul id="ul_list">
                <li class="current"><a href="#">商品介绍</a></li>
                <li><a href="#">规格与保障</a></li>
                <li><a href="#">售后保障</a></li>
                <li><a href="#">商品评价</a></li>
                <li><a href="#">手机社区</a></li>
            </ul>
        </div>
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">商品介绍模块</div>
        <div class="item">规格与保障模块</div>
        <div class="item">售后保障模块</div>
        <div class="item">商品评价模块</div>
        <div class="item">手机社区模块</div>
    </div>
</body>

js：

<script>
    var lis = document.querySelector('ul').querySelectorAll('li');
    var items = document.querySelector('.tab_con').querySelectorAll('.item');
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i); //给每个li设置索引号
        // 第一步 导航栏lis点击变色
        lis[i].onclick = function() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';
            //打印 点击li是否获取到索引号
            var index = this.getAttribute('index');
            console.log(index);
            //第二步 导航栏对应盒子里的内容
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block'; //这里不能用this this在这里指向的是lis
        }
    }
</script>

相应知识点如果对自定义属性不了解可以看这篇笔记：js自定义属性

lis[i].setAttribute('index',i);   //setAttribute 自定义li的索引号

事件委托：

事件委托就是利用函数的冒泡原理，把事件绑定在父元素上面，把所有本该子元素各自处理的事情交给父元素统一处理，达到性能优化的效果

     // 给父ul 设置id
    let ulList = document.getElementById("ul_list");
    ulList.onclick = function () {
        alert("触发被点击的li弹窗事件")
    }

爬楼梯的小新

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个

js中的tab栏，导航栏制作，点击当前li，显示对应盒子里的内容
复制链接

扫一扫

专栏目录

js中tab栏切换，点击当前li变色，同时切换内容，默认选中第一个

“相关推荐”对你有帮助么？