以下代码实现选项卡的功能，其中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;代码什么意思

阅读 2.3k

var a = document.querySelectorAll('a'); var p = document.querySelectorAll('p'); for(var i=0;i<a.length;i++){ (function(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[i].style.display = 'block'; } })(i) }

以下代码实现选项卡的功能，其中a [ i ].index=i;和p[this.index]不明白？？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？