<!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="#">第一個(gè)</a><a href="#">第二個(gè)</a><a href="#">第三個(gè)</a><p style="display: block">第一個(gè)的內(nèi)容</p><p>第二個(gè)的內(nèi)容</p><p>第三個(gè)的內(nèi)容</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;代碼什么意思
以下代碼實(shí)現(xiàn)選項(xiàng)卡的功能,其中a [ i ].index=i;和p[this.index]不明白??
猛跑小豬
2019-03-21 18:15:35