选项卡原生JS写法

选项卡是我们工作中常用到的方法，日常生活中总喜欢用jquery来写，下面我为大家总结了几种原生方法，供参考：
先上静态文本：

<style>
        .tab{
            height:50px;
        }
        .item{
            width:100px;
            height:50px;
            background: red;
            color:white;
            text-align: center;
            line-height: 50px;
            margin-bottom: 10px;
            float: left;
            border: 1px solid blue;
        }
        .item.itemed{
            background: blue;
            border: 1px solid red;
        }
        .contain .content{
            display: none;
            width: 300px;
            height:200px;
            border: 1px solid red;
        }
        .contain .show{
            display: block;
        }
    
    </style>
 <div class="tab">
      <div class="item itemed">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
</div>
<div class="contain">
     <div class="content show">1</div>
     <div class="content">2</div>
     <div class="content">3</div>
</div>

下面是JS代码：
方法一：for循环嵌套

<script>
var tabs = document.querySelectorAll(".item");
var cons = document.querySelectorAll(".content");
for(var i=0;i<tabs.length;i++){
            tabs[i].index = i;
            tabs[i].onclick = function(){
                for(var i=0;i<tabs.length;i++){
                    tabs[i].classList.remove("itemed");
                    cons[i].classList.remove("show");
                }
                this.classList.add("itemed");
                cons[this.index].classList.add("show");
            }
}
</script>

方法二：利用闭包

<script>
 var index = 0;
        for(var i=0;i<tabs.length;i++){
            (function(j){
                tabs[j].onclick =function(){
                    tabs[index].classList.remove("itemed");
                    cons[index].classList.remove("show");
                    index = j;
                    console.log(index);
                    tabs[index].classList.add("itemed");
                    cons[index].classList.add("show");
                }
            })(i)
}
</script>

在这里我用了classList方法，下面介绍一个这个方法的几种属性：

1. length：表示元素类名的个数，只读
2. item()：支持一个参数，为类名的索引，返回对应的类名
3. add()： 支持一个类名字符串参数。表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。
4. remove() 支持一个类名字符串参数。表示往类名列表中移除该类名。
5. toggle() 支持一个类名字符串参数。无则加勉，有则移除之意。若类名列表中有此类名，移除之，并返回false; 如果没有，则添加该类名，并返回true。
6. contains() 支持一个类名字符串参数。表示往类名列表中是否包含该类名。有点对应jQuery中的hasClass方法。