Tab栏切换

• 1、效果图
• 2、代码
• 3、 分析

1、效果图

2、代码

代码如下（js部分）：

 var sps = document.querySelectorAll('span')
        var lis = document.querySelectorAll('li')
        for (let i = 0; i < sps.length; i++) {
            sps[i].onclick = function () {
                sps.forEach(function (v) {
                        v.style.background = 'pink'
                    },
                lis.forEach(function(v,k){
                    if(k==i){
                        v.style.display='block'
                    }else{
                        v.style.display="none"
                    }
                }) 
                )
                sps[i].style.background = 'purple'
            }
        }

---

如下（html+css部分）：

  <div class="box" id="box">
        <div class="hd">
            <span class="current">体育</span>
            <span>娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd">
            <ul>
                <li class="current">我是体育模块</li>
                <li>我是娱乐模块</li>
                <li>我是新闻模块</li>
                <li>我是综合模块</li>
            </ul>
        </div>
    </div>
 <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px;
        }
        .hd span {
            display: inline-block;
            width: 90px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
        .hd span.current {
            background-color: purple;
        }
        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
        }

        .bd li.current {
            display: block;
        }
    </style>

---

3、 分析

tab切换栏可以分为两个部分来实现，首先是上面的选项卡，点击某一个，当前的底色会改变，其余不变（排他思想），下面部分会随着上面的切换而改变，之间的联系就是下面的内容与上面的选项卡是一 一对应的。先把所有选项卡都清空，再给当前点击添加样式。

标签：style,Tab,sps,height,切换,background,li,display
来源： https://blog.csdn.net/tt1234t5678tt/article/details/120194959