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

关于编程挑战有些问题想请教一下各位大神。

window.onload = function() {

var oUl1 = document.getElementById("ul1");

var aLi = oUl1.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";

for(var j = 0; j < aDiv.length; j++) {

aDiv[j].className = "hide";

}

aDiv[this.index].className = "show";

}

循环那一段不明白他是什么意思，它是怎样达到鼠标移动切换三个页面的

朱戏以

2016-07-20

源自：JavaScript进阶篇 10-1

关注问题我要回答

920

操作

收起

3 回答

用户1136614 回答被采纳 +3 积分
2016-07-20

  for(var i = 0; i < aLi.length; i++) {     //第一到第三个页面
            aLi[i].index = i;                  // 取下每个页面的页面数
            aLi[i].onmouseover = function() {        // 当前li标签被点击时
                for(var i = 0; i < aLi.length; i++) {           //将所有的className设置为空字符串
                    aLi[i].className = "";
                }
                this.className = "active";         //  单独当前页面的className设置为active
                for(var j = 0; j < aDiv.length; j++) {
                    aDiv[j].className = "hide";       //  所有的页面className设置为 hide
                } 
                aDiv[this.index].className = "show";     //  单独将当前页面设置为show
             }        
        }
       // 其实 aLi[i].onmouseover = function()被调用的时候 for循环将3个li标签的className设置为空  
        再单独将当前页面取出来设置它的this.className = "active"，这样你点击了那个li标签就有区别
        因为 active标签的css样式是不一样的 
        再  for(var j = 0; j < aDiv.length; j++) 这个for循环 也是将3个div标签className设置为空
        循环出来 aDiv[this.index].className = "show";//单独将当前页面设置为show 这样对应的页面就显示
        出来了，hide设置为隐藏 因为show不等于hide 是没有样式的  默认是显示的。 以上是我的个人理解。