选项卡的不同方法

选项卡的不同方法

HTML

    <div class="wrapper">
        <ul id="first">
            <li class="active">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
        </ul>
        <div class="box">
            <div class="tab" style="display: block">内容1</div>
            <div class="tab">内容2</div>
            <div class="tab">内容3</div>
            <div class="tab">内容4</div>
        </div>
    </div>

CSS

 ul {
            width: 400px;
            margin: auto;
            overflow: hidden;
        }

        ul li {
            width: 100px;
            height: 30px;
            background: aqua;
            float: left;
        }

        .box {
            width: 400px;

            margin: auto;
        }

        .tab {
            height: 200px;
            background: antiquewhite;
            display: none;
        }

        .active {
            background: antiquewhite;
        }

js

 // 方法一
        window.onload = function () {
            var first = document.getElementById('first');
            var lis = first.getElementsByTagName('li');
            var divs = document.getElementsByClassName('tab');
            for (let i = 0; i < lis.length; i++) {
                lis[i].dataset.index = i; 存储索引
                lis[i].onclick = function () {
                    先直接清除样式
                    for (let i = 0; i < divs.length; i++) {
                        lis[i].className = "";
                        divs[i].style.display = "none";
                    }
                    this.className = 'active';
                    divs[this.dataset.index].style.display = "block";
                }
            }
        };


        // 另外一种方法
        // HTMLCollection 和 NodeList 都是数组 但是HTMLCollection 里面没有foreach（）这个方法
        // 通俗点讲，htmlCollection是NodeList的一个元素，所有下面这个案例不能用getElementsByClassName这个输出
        //后期querySelection更好用
        var lis = document.querySelectorAll('ul>li');
        var divs = document.getElementsByClassName('tab');
        lis.forEach(function (item, index) {
            item.onclick = function () {
                for (let i = 0; i < divs.length; i++) {
                    lis[i].className = "";
                    divs[i].style.display = "none";
                }
                item.className = 'active';
                divs[index].style.display = "block";
            }
        })