為什么里面還有一個(gè)for循環(huán)

這里有3個(gè)<li>標(biāo)簽和<div>標(biāo)簽，當(dāng)點(diǎn)擊第一個(gè)<li>時(shí)，同時(shí)第一個(gè)<div>得到響應(yīng)，就需要通過(guò)index來(lái)完成。

它幫助獲取檢索<li>的序號(hào)位置，獲得的結(jié)果再在div中應(yīng)用，以此產(chǎn)生了關(guān)聯(lián)效應(yīng)。

for(var i= 0,len = oLis.length;i<len;i++){

? ? ? ? ? ? ? ? ?oLis[i].index = i;

? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {

? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){????? //第二個(gè)for循環(huán)將多余情形進(jìn)行了屏蔽

? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";

? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";

? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ?this.className = "on";????????????????????//這里再將要顯示的內(nèi)容，情形設(shè)置提取出來(lái)

? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";????

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ?};

window.onload = function(){

? ? ? ? ? ? ?var oTab = document.getElementById("tabs");

? ? ? ? ? ? ?var oUl = oTab.getElementsByTagName("ul")[0];

? ? ? ? ? ? ?var oLis = oUl.getElementsByTagName("li");

? ? ? ? ? ? ?var oDivs= oTab.getElementsByTagName("div");

? ? ? ? ? ? ?for(var i= 0,len = oLis.length;i<len;i++){

? ? ? ? ? ? ? ? ?oLis[i].index = i;//這里的index 是oLis[i]的自定義屬性，用來(lái)保存該元素在原數(shù)組中的下標(biāo).

? ? ? ? ? ? ? ? ?oLis[i].onclick = function() {//注冊(cè)一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊的時(shí)候所有標(biāo)簽都恢復(fù)最初狀態(tài)

? ? ? ? ? ? ? ? ? ? ?for(var n= 0;n<len;n++){//這步是相對(duì)于未被點(diǎn)擊部分的樣式

? ? ? ? ? ? ? ? ? ? ? ? ?oLis[n].className = "";//將所有的li的className設(shè)置為空

? ? ? ? ? ? ? ? ? ? ? ? ?oDivs[n].className = "hide";//將所有的div的className設(shè)置為隱藏.

? ? ? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ? ? ? ?this.className = "on";//將當(dāng)前點(diǎn)擊的li的className設(shè)置為on

? ? ? ? ? ? ? ? ? ? ?oDivs[this.index].className = "";//前邊保存了index的值,這里直接用this.index來(lái)表示當(dāng)前是第幾個(gè)div,并將其className設(shè)置為空.

? ? ? ? ? ? ? ? ?}

? ? ? ? ? ? ?};

? ? ? ? ?}

這樣再加上css中的控制 就實(shí)現(xiàn)了選顯卡切換.