js編程挑戰(zhàn),選項卡切換效果。
window.onload=function(){ ????????var?otab=document.getElementById("tabs"); ????????var?oli=document.getElementsByTagName("li"); ????????var?div=otab.getElementsByTagName("div"); ????????for(var?i=0;i<oli.length;i++){ ????????????oli[i].index=i;??????????? ????????????oli[i].onclick=function(){ ????????????????for(var?j=0;j<oli.length;j++){ ????????????????????oli[j].className=""; ????????????????????div[j].className="hide"; ????????????????} ????????????this.className="on"; ????????????div[this.index].className=""; ????????????} ????????} ????}
關(guān)于這里面的this是代表onload的document,還是循環(huán)里的oli啊,然后為什么第一層里面需要使用到this.classname ?div[this.index].classname啊 ?主要是不理解第二層和第一層區(qū)別的this 和div[里的index和i的不同]
2016-07-20
這里是將當(dāng)前的i保存到每個對象的index屬性中,目的就是在onclick事件中,點(diǎn)擊每個選項卡獲取當(dāng)前這個選項卡所對應(yīng)內(nèi)容的索引。i就是當(dāng)前選項卡所對應(yīng)的內(nèi)容的索引。
? ? ? ? ? ? ? ? ?這個for循環(huán)在文檔加載完成時就已經(jīng)開始執(zhí)行,并且執(zhí)行完了,所以,這個i最后是3,所以oDivs[i]中的這個i=3,oDivs中根本就沒有索引為3的元素,所以會報undefined錯誤,要想獲取當(dāng)前選項卡的索引,就需要將當(dāng)前的i保存到?jīng)]有oLis對象里面,如代碼:oLis[i].index = i;
2016-07-20
這里面的this代表的是循環(huán)里的oli里面的元素,this.classname ?div[this.index].classname中的this都是當(dāng)前的oli[i],是同一個