利用js实现Tab栏的切换功能

在很多网页都有这一模块的开发,所以今天我也来做一下,这个模块很重要.
几乎在每个网站都可以看得到
成果图展示
当点击其他模块,下面的内容也会跟着改变
后续的内容自己可以添加

<style>
   *{
        margin: 0;
        padding: 0;
    }
    .tab{
        border: 1px solid gray;
        height: 300px;
        width: 755px;
        margin: 100px auto;
    }
    .box-1{
        border-bottom:1px solid gray;
        height: 50px;
        background-color: whitesmoke;
        text-align: center;
    }
    li{ 
        list-style-type: none;
        line-height: 50px;
        float: left;
        display: block;
        width: 150px;
        border-right: 1px solid gray;
   }
   .li-frist{
       background-color: goldenrod;
   }
   .bg{
       background-color: goldenrod;
   }
    .item{
        display: none;
    }
</style>
------------html-------------
    <div class= "tab">
        <div class="box-1">
            <ul>
                <li class="li-frist">产品参数</li>
                <li>产品规格</li>
                <li>功能模块</li>
                <li>售后处理</li>
                <li>好评率</li>
            </ul>
        </div>
        <div class= "box-2">
            <!-- 设置默认显示出来这个 -->
            <div  class="item" style="display: block;">产品参数内容</div>
            <div  class="item">参评规格内容</div>
            <div  class="item">功能模块内容</div>
            <div  class="item">售后处理内容</div>
            <div  class="item">好评率内容</div>

        </div>
    </div>  

js模块

<script>
        var lis = document.querySelectorAll("li");
        var items = document.getElementsByClassName("item");
        //1.点击某一个模块,当前底色变成红色,其余不变(利用排他思想)
        for(var i =0; i<lis.length; i++){

        // 给li设置一个自定义属性
            lis[i].setAttribute("index",i);
            lis[i].onclick = function(){
                for(var i = 0; i<lis.length; i++){
                    lis[i].className = "";
                }
                this.className = "bg";
        //2显示,   点击某一个模块,内容跟着变
                var index =this.getAttribute("index");
                    // 让其余的隐藏
                for(var i = 0; i<items.length;i++){
                    items[i].style.display = "none";
                }
                //显示自己
                items[index].style.display = "block";
            }

        }
        
    </script>

这里利用了两次排他思想,可见这个模块在实际开发过程中的重要性.
希望大家喜欢.