以下代码实现选项卡的功能，其中a [ i ].index=i;和p[this.index]不明白？？
<!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回答
-
三国纷争
执行完之后，你的i一直为a.length的值 -
幕布斯7119047
这个是对多个a标签赋予动作，因为前面查询到的a标签有多个，所以a[i]就是依次取不同的a标签元素进行处理。p标签的也是类似的。这个应该是一个切换选项卡效果，它先把所有的p标签都隐藏，然后选择一个取消隐藏来显示。p[this.index]这里因为是指一个a的触发函数中，所以会取到对应a的index值。
随时随地看视频慕课网APP
相关分类
JavaScript