<!doctype html><html><head><meta charset="UTF-8"><title></title> <style> a{ text-decoration: none; display: inline-block; background: #000; color: #fff; text-align: center; width: 100px; height:40px; line-height: 40px; font-size: 25px; } p{ border:4px solid #000; display: none; height: 300px; } </style></head><body><a style="background: red;" href="#">第一个</a><a href="#">第二个</a><a href="#">第三个</a><p style="display: block">第一个的内容</p><p>第二个的内容</p><p>第三个的内容</p><script> var a = document.querySelectorAll('a'); var p = document.querySelectorAll('p'); for(var i=0;i<a.length;i++){ a[i].index = i; a[i].onclick = function () { for(var j=0;j<a.length;j++){ a[j].style.background = '#000'; p[j].style.display = 'none'; } this.style.background = 'red'; p[this.index].style.display = 'block'; } }</script></body></html>其中js代码中 a[i].index = i;和p[this.index].style.display = 'block';不明白？？为什么不能直接使用p[i].style.display?这行a[i].index = i;代码什么意思
3 回答
幕布斯7119047
TA贡献1794条经验 获得超8个赞
这个是对多个a标签赋予动作，因为前面查询到的a标签有多个，所以a[i]就是依次取不同的a标签元素进行处理。
p标签的也是类似的。
这个应该是一个切换选项卡效果，它先把所有的p标签都隐藏，然后选择一个取消隐藏来显示。p[this.index]这里因为是指一个a的触发函数中，所以会取到对应a的index值。
添加回答
举报
0/150
提交
取消