for循环 aLi[i].index = i;的意义和作用

    这里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，从而显示出来。