经典案例之Tab栏

简单效果：
在这里插入图片描述
难点解析：

这个小案例的难点在与当我们给li编写事件处理函数时，也要拿到对应的div。
解法就是我们要知道lis的个数和divs是相同的。而且我们要拿的这俩个元素它们是有非常大的联系的。比如我拿到的是lis[2]，那么对应的div就应是divs[2]。
事件处理函数中divs的目标索引我们是无法直接拿到，但是我们却可以通过这个处理函数的this拿到触发事件的小li对象。我们事先可以每一个小li一个标志属性，借助它们之间的联系。如我给每个小li标号0到4（对应lis的索引），设第三个小li被触发事件了，我们通过this拿到这个li对象取出这个标志值2 。那么其对应的div的索引也就是2啊即divs[2]
那么思路就流畅了。我前面说过DOM操作拿到的元素都是类型都是对象，既然是对象我们就可以通过对象名.属性=""的方法先给我们的每一个小li赋一个标志元素。这个操作绑定元素之前，因为我们触发事件的函数要用。
设置完毕后，在事件处理函数中我们是可以很容易的通过this.标志拿到我们刚刚设置的标志值的。即目标就是divs[标志值]

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 511px;
            border: 1px solid red;
        }
        
        .nav {
            height: 30px;
        }
        
        .nav li {
            float: left;
            width: 100px;
            height: 30px;
            list-style: none;
            text-align: center;
            background-color: aqua;
            border: 1px solid yellow;
        }
        
        .nav .cur01 {
            background-color: yellow;
        }
        
        .con {
            width: 100%;
            height: 200px;
            border: 1px solid red;
        }
        
        .con div {
            display: none;
            width: 100%;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="nav">
            <ul>
                <li>我是小li一号</li>
                <li>我是小li二号</li>
                <li>我是小li三号</li>
                <li>我是小li四号</li>
                <li>我是小li五号</li>
            </ul>
        </div>
        <div class="con">
            <div class="con1" style="display: block;">11111</div>
            <div class="con1">22222</div>
            <div class="con1">33333</div>
            <div class="con1">44444</div>
            <div class="con1">55555</div>
        </div>

    </div>

    <script>
        var lis = document.querySelectorAll("li");
        var divs = document.getElementsByClassName("con1");
        // 给每一个li绑定事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            console.log(divs[i].index);
            //当前的这个li事件触发的同时，对应的div也应该显示出来
            //难点就是我们无法拿到这个div，但是我们的事件源是li.我们可以给每个li实现绑定一个标志属性，一旦当前li被触发的时候就拿到这个标志属性值。用来作为div的索引
            lis[i].onmouseover = function() {
                // 先检测是否别人有有了cur01属性，有了就去除。因为这个属性在一个时间只能属于一个人
                //排他思想
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = "";
                }
                // 留下自己
                this.className = "cur01";
                // 去掉他人
                for (var j = 0; j < divs.length; j++) {
                    divs[j].style.display = "none";
                }
                // 留下自己
                divs[this.index].style.display = "block";
                console.log(this.index);
            }

        }
    </script>

</body>

</html>

一个勤奋的懒人

发布了68 篇原创文章 · 获赞 82 · 访问量 1万+

私信关注

webAPI案例之三分钟玩转tab栏

经典案例之Tab栏

猜你喜欢