js 实现选项卡切换

来源:10-1 编程挑战

Ipython9

2017-05-08 15:42

    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";
            }       
        }
    }
   这个index是索引的意思吗  怎么用的   还有就是代码有点不懂


写回答 关注

1回答

  • 慕莱坞7434332
    2017-05-09 11:33:43
    已采纳
    window.onload = function() {                      //网页加载完执行该函数
            var oUl1 = document.getElementById("ul1"); //获取id为ul1的元素存入oUl1
            var aLi = oUl1.getElementsByTagName("li"); //获取oUl1中标签为li的元素
            var oDiv = document.getElementById("tab-list");//获取id为tab-list的元素存入oDiv
            var aDiv = oDiv.getElementsByTagName("div");  //获取oDIv中标签为div的元素
            for(var i = 0; i < aLi.length; i++) {        //循环aLi
                aLi[i].index = i;                        //aLi的下标赋值为i
                aLi[i].onmouseover = function() {        //滑动触发函数
                    for(var i = 0; i < aLi.length; i++) {
                        aLi[i].className = "";            //循环为aLi添加class
                    }
                    this.className = "active";             //当前对象的class名为active
                    for(var j = 0; j < aDiv.length; j++) {
                        aDiv[j].className = "hide";         //循环为aDiv添加类名为hide
                    }
                    aDiv[this.index].className = "show";   //aDiv的class=“show”
                }        
            }
        }

    http://blog.csdn.net/kuangruike/article/details/50848585   这是对aLi[i].index = i;的解释

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题