<div id="tabarea"> <ul class="clearFix"> <li>aaaaaaaaaa</li> <li>bbbbbbbbbb</li> <li>cccccccccc</li> <li>ffffdffffdffffdd</li> </ul><div class="box active">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </div><script> function tab(){ var eleId = document.getElementById("tabarea"); var li = eleId.getElementsByTagName("li"); var div = eleId.getElementsByTagName("div");for(var i=0;i<li.length;i++){ li[i].onclick = function(){ for(var j=0; j<li.length; j++) { if (this == li[j]) { li[j].className = "on"; div[j].className = "box active"; } else { li[j].className = ""; div[j].className = "box";} } } } }tab(); </script>
有一處不明白的地方,點(diǎn)擊li[i]的時(shí)候js怎么給第div[i]添加classname的
樓主問的是代碼啥意思?點(diǎn)擊當(dāng)前l(fā)i元素時(shí)給當(dāng)前l(fā)i添加className,同時(shí)移除先前添加的其他li的classMame。
給每個(gè)li綁定onclick事件后,當(dāng)你點(diǎn)擊某個(gè)li節(jié)點(diǎn),那么onclick里的this指向的就是你點(diǎn)擊的那個(gè)li節(jié)點(diǎn)了。然后對(duì)li這個(gè)數(shù)組就行遍歷,尋找到你當(dāng)前點(diǎn)擊的那個(gè)li節(jié)點(diǎn)的[下標(biāo)]。而li和div是一一對(duì)應(yīng)的,使用你找到的[下標(biāo)]就可以對(duì)div進(jìn)行操作了。