简易选项卡小技巧

小陌很忙

分类: Javascript案列 168 2


<body>
    <div class="wrap">
        <nav id="nav">
            <a href="javascript:;" class="active">我的行程</a>
            <a href="javascript:;">消息中心</a>
            <a href="javascript:;">角色管理</a>
            <a href="javascript:;">定时任务补偿</a>
        </nav>
        <div class="bords">
            <div class="active">我的行程</div>
            <div>消息中心</div>
            <div>角色管理</div>
            <div>定时任务补偿</div>
        </div>
    </div>
</body>

首先给nav栏的a设置成单选


        let oNavs = document.querySelectorAll('#nav a');
        let oBoxs = document.querySelectorAll('.bords div');

        // 操作一组元素时,先用循环把它遍历出来
        for (let i = 0; i < oNavs.length; i++) {
            // nav栏的设置成单选,先全部清空,在给点击的设置
            oNavs[i].onclick = function() {
                for (let j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                }
                // 这里的this指的就是当前点击着的li
                this.classList.add('active');
            }
        

然后给下面div设置显示隐藏时有个小技巧,<nav id="nav"><div class="bords">里都是四个子元素,且是上面第一个对应下面第一个的显示,以此类推,可以发现它们的数字下标是统一的。
如果变量声明用的是 let,可以直接使用 oBoxs[i],利用它们的共同点下标是相同的直接操作


        for (let i = 0; i < oNavs.length; i++) {
            oNavs[i].onclick = function() {
                for (let j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                    // 这里给div清空时,可以借着上面a标签清空时的这个循环给它清空
                    
                    // 因为for循环不在乎你循环的是谁,它在乎的是循环几次,
                    // 不要认为它循环的是元素或对象,它循环的是一个数值,数字而已
                    oBoxs[j].classList.remove('active');
                }
                this.classList.add('active');
                // console.log(i);
                oBoxs[i].classList.add('active');
            }
        }

DEMO展示

但如果变量声明使用的是var,这里不要直接在点击事件里操作oBoxs[i]


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');


        for (var i = 0; i < oNavs.length; i++) {
            oNavs[i].onclick = function() {
                for (var j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                }
                this.classList.add('active');
                console.log(i);
                // 4
            }
        }

此时的i,无论点击那个,显示的都是4,是因为此时的i在第一层for循环时,已经循环4次++完了,所以在点击时显示的是一个加完之后的值,i是直接用不了的。而oNavs[i].onclick里的i所处的位置正好在for循环当中,for循环在直接到oNavs[i].onclick时,后面的函数在没点击之前是不会往里读取去触发的,只会告诉你在点击时是会执行这个函数的,具体函数里面是什么,你没点时我也不知道。

这时就可以换个思路,i在for循环里循环时是正常的,这样就可以给oNavs[i]每一个<a>添加一个属性


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');


        for (var i = 0; i < oNavs.length; i++) {
            // 
            oNavs[i].title = i;
            oNavs[i].onclick = function() {
                ......
            }
        }

加完之后可以看到每个a标签就都有一个title标签了,数字也是0123,这样可以理解为每一个a都有自己对应的下标了。
既然有下标,就不用再在里面去获取i了,直接用oBoxs[this.title]去代替了,这里的this.title也就是被点击时的a标签的title


        var oNavs = document.querySelectorAll('#nav a');
        var oBoxs = document.querySelectorAll('.bords div');


        for (var i = 0; i < oNavs.length; i++) {
            // 添加一个属性
            oNavs[i].title = i;
            oNavs[i].onclick = function() {
                for (var j = 0; j < oNavs.length; j++) {
                    oNavs[j].classList.remove('active');
                    oBoxs[j].classList.remove('active');
                }
                this.classList.add('active');
                // console.log(i);
                // oBoxs[i].classList.add('active');

                // 打印获取一下this.title的值
                console.log(this.title);
                // 直接用oBoxs[this.title]去操作
                oBoxs[this.title].classList.add('active');

            }
        }

DEMO展示

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry

作者简介:小陌很忙

学无止境,生命不息,折腾不止!

共 2 条评论关于 “简易选项卡小技巧”

Loading...