JS实现Tab栏切换

Revin050

已于 2022-07-16 10:26:09 修改

阅读量4.7k

点赞数 15

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

于 2022-01-13 10:44:15 首次发布

本文链接：https://blog.csdn.net/qq_45847016/article/details/122468798

版权

JS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

记录使用JS实现Tab切换的效果

实现过程如下，首先利用排他思想选定模块选项卡，随后根据用户自定义标签再次利用排他思想显示内容模块。
具体代码如下

<head>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">模块1</li>
                <li>模块2</li>
                <li>模块3</li>
                <li>模块4</li>
                <li>模块5</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                模块1内容
            </div>
            <div class="item">
                模块2内容
            </div>
            <div class="item">
                模块3内容
            </div>
            <div class="item">
                模块4内容
            </div>
            <div class="item">
                模块5内容
            </div>

        </div>
    </div>
    <script>
        // 首先获取元素
        var lis = document.querySelector('.tab_list').querySelectorAll('li')
        var items = document.querySelectorAll('.item')
        // 元素获取完成之后利用for循环为每个li标签绑定事件
        for (var i = 0; i < lis.length; i++) {
            // 为每个li标签添加自定义属性index
            lis[i].setAttribute('index', i)
            lis[i].onclick = function () {
                // 所有标签的类均设置为空
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = ''
                }
                // 将自己标签的类设置成红背景，白字体
                this.className = 'current'
                // 获取当前li的index属性。
                var index = this.getAttribute('index')
                for (var i = 0; i < lis.length; i++) {
                    // 将所有li标签对应的内容均设置为不可见
                    items[i].style.display = 'none'
                }
                // 将当前li标签对应的内容设置为可见
                items[index].style.display = 'block';
            }


        }
    </script>
</body>

运行结果如下
在这里插入图片描述

Revin050

关注

15
点赞
踩
79

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现Tab栏切换

记录使用JS实现Tab切换的效果实现过程如下，首先利用排他思想选定模块选项卡，随后根据用户自定义标签再次利用排他思想显示内容模块。具体代码如下<head> * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px;
复制链接

扫一扫