JS实现Tab栏切换

记录使用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>

运行结果如下
JS实现Tab栏切换_第1张图片
JS实现Tab栏切换_第2张图片

你可能感兴趣的:(JS,javascript,前端,开发语言)