js实现导航切换（tab）

韭菜馅的盒子

已于 2022-10-18 10:51:15 修改

阅读量413

点赞数

文章标签： javascript html 前端

于 2022-10-18 10:49:40 首次发布

本文链接：https://blog.csdn.net/Bdbdbdnnd/article/details/127383808

版权

直接上代码，里面有注释，不明白的欢迎评论，有不足的也可以指出。

  <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            margin-left: 40px;

        }

        .box div {
            background: rgb(232, 234, 237);
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            padding: 5px;
            border: 1px solid #666;
            width: 180px;
            box-sizing: border-box;
            cursor: pointer;
        }

        .box .box_list {

            background: #f24d4f;
            color: #fff;
        }

        .content {
            display: flex;
            margin-left: 40px;


        }

        .content div {
            width: 300px;
            height: 200px;
            border: 2px solid #999;
            display: none;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            line-height: 200px;
            box-sizing: border-box;
        }

        .content .content_list {
            display: block
        }
    </style>

<body>
    <div class="box">
        <div class="box_list">首页</div>
        <div>详情页</div>
        <div>公司简介</div>
        <div>产品中心</div>
    </div>
    <div class="content">
        <div class="content_list">我是首页</div>
        <div>我是详情页</div>
        <div>公司的简介</div>
        <div>公司的产品</div>
    </div>
    <script>
        //获取box下的所有div
        var list = document.querySelector('.box').querySelectorAll('div');
        // 获取content下的所有div
        var content = document.querySelector('.content').querySelectorAll('div')
        for (var i = 0; i < list.length; i++) {
            //一.tab
            //1.1给元素添加索引
            list[i].setAttribute('index', i)
            //1.2添加事件
            list[i].addEventListener('click', function () {
                //先删除所有的的class
                for (var j = 0; j < list.length; j++) {
                    list[j].className = '';
                }
            //1.3给当前添加当前点击div添加class
                this.className = 'box_list';
            //二.tab对应的内容
            //2.1同上  先把所有的div 设置隐藏
                for (var p = 0; p < content.length; p++) {
                    content[p].style.display = 'none';

                }
            //2.2根据点击获取点击tab的索引，判断显示对应的div
                var index = this.getAttribute('index')
                content[index].style.display = 'block'

            })


        }


    </script>
</body>

谢谢浏览❤