JavaScript实现Tab栏切换

JavaScript实现Tab栏切换

html:

  <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>
    
    <div class="box">
        <ul>
            <li class="current">鞋子</li>
            <li>袜子</li>
            <li>帽子</li>
            <li>裤子</li>
            <li>裙子</li>
        </ul>
        <span class="show">鞋子</span>
        <span>袜子</span>
        <span>帽子</span>
        <span>裤子</span>
        <span>裙子</span>
    </div>

css:

    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .box{
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 50px auto;
            overflow: hidden;
        }

        ul{
            width: 600px;
            height: 40px;
            margin-left: -1px;
            list-style: none;
        }

        li{
            float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 600 18px/40px "simsun";
            background-color: pink;
            cursor: pointer;
        }

        span{
            display: none;
            width: 500px;
            height: 160px;
            background-color: yellow;
            text-align: center;
            font: 700 100px/160px "simsun";
        }

        .show{
            display: block;
        }

        .current{
            background-color: yellow;
        }
    </style>

javascript:

 <script>
        window.onload = function(){
            // 1.抓取元素 -- 获取所有的类名叫box的盒子
            var boxArr = document.getElementsByClassName('box')
            // 遍历 ---在遍历的过程中，调用执行 3次fn函数
            for(var i=0; i<boxArr.length; i++){
                // 把每个盒子，都作为 实参，传入到 这个fn函数中
                fn(boxArr[i])
            }
          

            function fn(element){
                // console.log(element)
                // 从 传入的 这个盒子里面，拿li，拿 span ，因为我们要去操作它们。
                // 1. 抓取元素
                var liArr = element.getElementsByTagName('li')
                var spanArr = element.getElementsByTagName('span')
                // console.log(liArr,spanArr)
                // 2.遍历（逐一操作）
                for(var i=0; i<liArr.length; i++){
                    console.log(liArr[i])
                    // 给当前li元素身上，添加一个属性index，并且给这个index属性赋值
                    liArr[i].index = i;

                    liArr[i].onmouseover = function(){
                        console.log(this.index)

                        // 把.box所有li元素身上类去掉，span上的类去掉
                        for(var j=0; j<liArr.length; j++){
                            liArr[j].className = "";
                            spanArr[j].className = "";
                        }

                        // 给当前的li加样式
                        this.className = "current";

                        // 给当前的span加样式
                        spanArr[this.index].className = "show";

                    }


                }
            }
        }
    </script>