小练习2：选项卡

• 本次练习，我们来练习选项卡的简单写法，在很多新闻门户网站，选项卡很常见，通常通过鼠标点击上方概述来改变下方内容栏的内容，本次小练习就来完成选项卡的一些基本功能。
• 首先通过HTML和CSS完成简单选项卡的样式设置
• HTML代码如下

    <ul id="list" class="clear">
        <li class="selectedLi">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="selectedDiv">1</div>
    <div>2</div>
    <div>3</div>
复制代码

• 选项卡样式如下

• JS部分主要通过循环来获取每个li和div来完成对其className的改变以及通过点击事件来确定改变哪个className，JS代码如下

    var oUl = document.getElementById("list");
    var oLis = oUl.getElementsByTagName("li");
    var oDivs = document.getElementsByTagName("div");
    oLis = [].slice.call(oLis);
    oLis.forEach(function (item1,index1) {
        item1.onclick = function () {
            oLis.forEach(function (item2,index2) {
                if(index1 === index2) return;
                oLis[index2].className = "";
                oDivs[index2].className = "";
                oLis[index1].className = "selectedLi";
                oDivs[index1].className = "selectedDiv";
            })
        }
    })
复制代码

• 样式如下

• JS部分代码还可以通过for循环完成，主要代码如下

        function changeTab(n){
            for(var i = 0;i<oLis.length;i++){
                oLis[i].className = "";
                oDivs[i].className = "";
            }
            oLis[n].className ="selectedLi";
            oDivs[n].className = "selectedDiv";
        }
        for(let i = 0;i<oLis.length;i++){
            oLis[i].a = i;
            oLis[i].onclick = function(){
                changeTab(this.a);
            }
        }
复制代码

• 其他方法如下：

    function change(n) {
        if(s === n) return;
        oLis[s].className = '';
        oDivs[s].className = '';
        oLis[n].className = "selectedLi";
        oDivs[n].className = "selectedDiv";
        s = n;
    }
    for (var i = 0; i < oLis.length; i++){
        var s = 0;
        oLis[i].a = i;
        oLis[i].onclick = function () {
            change(this.a);
        }
    }
复制代码

        function change(n) {
            for (var j = 0; j < oLis.length; j++) {
                if (oLis[j] != n) {
                    oLis[j].className = '';
                    oDivs[j].className = '';
                }else {
                    oLis[j].className = "selectedLi";
                    oDivs[j].className = "selectedDiv";
                }
            }
        }

        for (var i = 0; i < oLis.length; i++){
            oLis[i].onclick = function () {
                change(this);
            }
        }
复制代码

转载于:https://juejin.im/post/5ba4a7e96fb9a05cdd2d0607