                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

向各位请教，我还是不能理解它的原理

这里的 aLi[i].index=i ; 这样写的意义是什么？

index 属性可返回下拉列表中选项的索引位置。那么这里设置aLi的索引位置其意义是什么？换句话说为什么这里要这么设置呢？

用aLi.length做for循环这个能够理解，是循环了aLi的index和aLi[i].onmouseover=function(){};

那么再function里面在循环aLi的length给它aLi.className=""这一步是为什么？for循环里面循环不是二维数组的用法吗？这里面创建了一个二维数组并给每个aLi的class为空？

而其下一步给的this.className="active"; 表示什么？这里的this是aLi[i]的onmouseover的aLi；

那么为什么这里aDiv[j]循环在aLi[i].onmouseover里面循环呢？而后aDiv[this.index]里面的this表示什么呢？

求解，问题很多，麻烦大神耐心讲解下，非常感谢，无以为报。

Mountain_Ghost

2015-11-19

源自：JavaScript进阶篇 10-1

关注问题我要回答

1922

操作

收起

2 回答

李晓健
2015-11-19

 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";
            }
        }
     }

不知道这样能不能解决你的问题