JS基础-Tab栏切换案例

需要达到的效果：

点击上面的模块下面的文字就对应显示。

思路：

整体分成两个部分，第一个部分是点击上面的item点击哪一个对应哪一个就有被点击的效果，这个阔以通过排他思想来写，排他思想还没搞明白的阔以看看我这篇博客：JS基础-排他思想案例_setTimeout()的博客-CSDN博客

第二个部分就是点击上面的item对应下面的内容显示出来，这个通过自定义属性来实现，这里我是给上面和下面都设定了自定义属性。完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 100px;
            margin: 200px auto;
        }
        
        .box .tabtop {
            width: 800px;
            height: 40px;
            background-color: #eef1ee;
        }
        
        .box .tabtop ul li {
            list-style: none;
            float: left;
            line-height: 40px;
            padding: 0 10px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .hs {
            color: #fff;
            background-color: #c61521;
        }
        
        .box .tabitem {
            font-size: 14px;
        }
        
        .box .tabitem div {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="tabtop">
            <ul>
                <li class="hs">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品详情(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tabitem" id="tb-item">
            <!-- 内容部分 -->
            <div style="display: block;">商品介绍模块内容</div>
            <div>规划与包装模块内容</div>
            <div>售后保障模块内容</div>
            <div>商品评价模块内容</div>
            <div>手机社区内容</div>
            <div></div>
        </div>
    </div>
    <script>
        // 获取所有的li元素
        var lis = document.querySelectorAll('li');
        // 获取全部的内容部分元素
        var content = document.getElementById('tb-item').querySelectorAll('div');
        // 给上面的内容部分设置自定义属性
        for (var i = 0; i < content.length; i++) {
            content[i].setAttribute('index', i);
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute('indexs', i);
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                // 干掉其他人
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'hs';
                // 寻找下面内容
                for (var j = 0; j < content.length; j++) {
                    if (this.getAttribute('indexs') == content[j].getAttribute('index')) {
                        // 干掉其他人
                        for (var k = 0; k < content.length; k++) {
                            content[k].style.display = 'none';
                        }
                        content[j].style.display = 'block';
                    }
                }

            }
        }
    </script>
</body>

</html>

JS基础-Tab栏切换案例

猜你喜欢