這里aLi[i]是對象。aLi[i].index=i是給這個對象添加一個自定義屬性index並且屬性值為i,index就是索引的意思。當然這個屬性名你可以自取。這里給它自定義這個屬性是希望在后面通過這個屬性找到並利用這個對象。
window.onload = function(){ var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var oDiv = document.getElementById('tab-list'); var aDiv = oDiv.getElementsByTagName('div'); //對頭部進行循環 for(var i=0; i<aLi.length; i++){ //給每一個導航添加一下索引 aLi[i].index=i; //給每一個導航添加鼠標經過事件 aLi[i].onmouseover=function(){ //循環所有的導航並且清空激活樣式 for(var i=0; i<aLi.length; i++){ aLi[i].className=''; } //給鼠標所在的導航添加激活樣式 this.className='active'; //循環所有的內容區域 並添加上bd的className 其實這一部的真正目的是為了去掉內容區域上的 on 樣式,也就是讓所有的div隱藏 for(var j=0; j<aDiv.length; j++){ aDiv[j].className = 'bd'; } //把導航對應的索引位置的 div 顯示出來,這里也就是添加index的作用,通過這個索引來找到對應的div 這里的 this 就是指上面鼠標所在的導航 aDiv[this.index].className = "bd on"; } } }
問:
aLi[i].index = i;
aDiv[this.index].className = "";
在這里提到第一句使用index是讓了個ali添加索引值,使其便於查找。
但ali本身不是一個數組嘛?自帶了數組下標呀,為啥需要index。
答:
js在onload加載的時候,for循環已經在運行完成了,等待的是鼠標點擊事件的出發,那么此時,i的值已經達到3了,如果沒有索引值,會出現只有i=3的錯誤,利用自定義的index,將每個點擊對應的下標存放在index,在點擊事件觸發的時候,准確定位到該index所在div,從而顯示出來。