简易选项卡小技巧
分类： Javascript案列 1391 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');
}
}
但如果变量声明使用的是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');
}
}
共 2 条评论关于 “简易选项卡小技巧”