谁能详细的和我解释一下每句 JS实现选项卡切换的意思么-慕课网

首页课程实战体系课手记专栏慕课教程

谁能详细的和我解释一下每句 JS实现选项卡切换的意思么

来源：10-1 编程挑战

人源泰叁

2015-12-10 16:35

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

}

写回答关注

2回答

lynhao: 2015-12-10 16:44:17

已采纳

window.onload = function() {//onload意思是说等静态网页加载后才执行js代码逻辑
        var oUl1 = document.getElementById("ul1"); //getElementById是获得标签的id
        var aLi = oUl1.getElementsByTagName("li");//上面那个理解了，下面道理一样，获取name
        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";//显示
            }        
        }
    }

5 0

Scny 回复lynhao

我想问下第10行 aLi[i].className = ""; //设置为空是啥意思呢

2015-12-18 11:47:22

共 5 条回复 >