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

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

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

}

人源泰叁

2015-12-10

源自：JavaScript进阶篇 10-1

关注问题我要回答

2218

操作

收起

2 回答

lynhao
2015-12-10

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";//显示
            }        
        }
    }