简易选项卡小技巧

2021/3/8 02:25:44admin0 阅读2 评论

<h2></h2>
<pre class=“language-html line-numbers”><code class=“language-html”>
<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>
</code></pre>
<p>首先给nav栏的a设置成单选</p>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
let oNavs = document.querySelectorAll(‘#nav a’);
let oBoxs = document.querySelectorAll(‘.bords div’);

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

</code></pre>
<p>然后给下面div设置显示隐藏时有个小技巧，<code><nav id="nav"></code>和<code><div class="bords"></code>里都是四个子元素，且是上面第一个对应下面第一个的显示，以此类推，可以发现它们的数字下标是统一的。
如果变量声明用的是 <code>let</code>，可以直接使用 <code>oBoxs[i]</code>，利用它们的共同点下标是相同的直接操作</p>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
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');
        }
    }

</code></pre>
<p><a class=“case-show” href=“https://i.moshanghua.net/html/选项卡let.html” target=“_blank”>DEMO展示</a></p></p>
<p>但如果变量声明使用的是<code>var</code>，这里不要直接在点击事件里操作<code>oBoxs[i]</code>，</p>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
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
        }
    }

</code></pre>
<p>此时的<code>i</code>，无论点击那个，显示的都是4，是因为此时的<code>i</code>在第一层for循环时，已经循环4次++完了，所以在点击时显示的是一个加完之后的值，i是直接用不了的。而<code>oNavs[i].onclick</code>里的<code>i</code>所处的位置正好在for循环当中，for循环在直接到<code>oNavs[i].onclick</code>时，后面的函数在没点击之前是不会往里读取去触发的，只会告诉你在点击时是会执行这个函数的，具体函数里面是什么，你没点时我也不知道。</p>
<p>这时就可以换个思路，<code>i</code>在for循环里循环时是正常的，这样就可以给<code>oNavs[i]</code>每一个<code><a></code>添加一个属性</p>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
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() {
            ......
        }
    }

</code></pre>
<p>加完之后可以看到每个<code>a标签</code>就都有一个<code>title标签</code>了，数字也是0123，这样可以理解为每一个a都有自己对应的下标了。
既然有下标，就不用再在里面去获取<code>i</code>了，直接用oBoxs[this.title]去代替了，这里的<code>this.title</code>也就是被点击时的<code>a标签的title</code></p>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
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');

        }
    }

</code></pre>
<p><a class=“case-show” href=“https://i.moshanghua.net/html/选项卡var.html” target=“_blank”>DEMO展示</a>

评论区