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

本练习题的同学代码第一位，看不太懂，有大佬写写注释吗。。

<script type="text/javascript">

    // JS实现选项卡切换
    window.onload = function () {
        var nav = document.getElementById("nav");
        var nav1 = nav.getElementsByTagName("li");
        var oDiv = document.getElementById("content");
        var xDiv = oDiv.getElementsByTagName("div");
        for (var i = 0; i < nav1.length;i++){
            nav1[i].index = i;
            nav1[i].onmouseover = function () {
                for (var i=0;i<nav1.length;i++){
                    nav1[i].className = "";

                }
                this.className = "active";
                for (var j=0;j<xDiv.length;j++){
                    xDiv[j].className = "hide";
                }
                xDiv[this.index].className = "show";
            }
        }
    }

</script>

慕慕0116261

2019-07-30

源自：JavaScript进阶篇 10-1

关注问题我要回答

818

操作

收起

2 回答

慕函数2570892 回答被采纳 +2 积分
2019-08-13

<script type="text/javascript">

    // JS实现选项卡切换
    window.onload = function () {
        var nav = document.getElementById("nav");         //获取id为nav的节点，即选项卡的第一行）
        var nav1 = nav.getElementsByTagName("li");        //获取三个选项（房产、家居、二手房）。以数组的形式返回给nav1
        var oDiv = document.getElementById("content");            //获取id为content的节点，该节点包含三页不同的内容。
        var xDiv = oDiv.getElementsByTagName("div");            //进而获得三页的界面，返回形式为数组，用于操作
        for (var i = 0; i < nav1.length;i++){            //该循环将三个选项的属性全部置为
            nav1[i].index = i;
            nav1[i].onmouseover = function () {
                for (var i=0;i<nav1.length;i++){      //将三个选项的属性class全部置为空，即显示为未被选中效果
                    nav1[i].className = "";

                }
                this.className = "active";       //鼠标悬停选项的class属性重新被置为active，该选项被显示为选中效果
                for (var j=0;j<xDiv.length;j++){    //将三个页面的class属性置为hide，即全部隐藏
                    xDiv[j].className = "hide";
                }
                xDiv[this.index].className = "show";        //鼠标悬停选项对应的页面的class属性重新被置为show，该界面被显示出来
            }
        }
    }

</script>