为什么代码照搬也出错?

来源:10-1 编程挑战

channel_ho

2016-07-31 11:02

当鼠标移到div的时候,整个div都消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        *{
            margin:0;
            padding:0;
            font:normal 12px "微软雅黑"; color:#000;
        }
        ul{
            list-style-type:none;
        }
        a{
            text-decoration:none;
        }
        #tab-list{
            width:275px;
            height:190px;
            margin:20px auto;
        }
        #ul1{
            border-bottom:2px solid #8b4513;
            height:32px;
        }
        #ul1 li{
            display:inline-block;
            width:60px;
            line-height:30px;
            text-align:center;
            border:1px solid #999;
            border-bottom:none;
            margin-left:5px;
        }
        #ul1 li:hover{
            cursor:pointer;
        }
        #ul1 li.active{
            border-top:2px solid #8b4513;
            border-bottom:2px solid #fff;
        }
        #tab-list div{
            border:1px solid #7396b8;
            border-top:none;
        }
        #tab-list div li{
            height:30px;
            line-height:30px;
            text-indent:8px;
        }
        .show{
            display:block;
        }
        .hide{
            display:none;
        }
    </style>
    <script type="text/javascript">
        // JS实现选项卡切换
        window.onload = function(){
            var oUl1 = document.getElementById("ul1");
            var aLi = document.getElementsByTagName("li");
            var oDiv = document.getElementById("tab-list");
            var aDiv = document.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";
                }
            }
        }
    </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tab-list">
    <ul id="ul1">
        <li>房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div>
        <ul>
            <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>
    <div>
        <ul>
            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>
</body>
</html>


写回答 关注

1回答

  • 水里有条鱼
    2016-07-31 12:21:56
    已采纳

    很明显并没有照搬,先看看这里

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

                var aLi = document.getElementsByTagName("li");

                var oDiv = document.getElementById("tab-list");

                var aDiv = document.getElementsByTagName("div");

    再看看 答案的

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

                var aLi = oUl1.getElementsByTagName("li");

                var oDiv = document.getElementById("tab-list");

                var aDiv = oDiv.getElementsByTagName("div");

    请注意body里面的层次结构,为什么我们不能直接document.getElementsByTagName("li");?为什么不能直接document.getElementsByTagName("div");?

    因为你看看你直接用节点名li得到数组并不只有房产家居二手房三个,还有后面的很多,这样的错误会让你后面的for (var i=0; i<aLi.length; i++)代码紊乱,所以我们要在ul1下得到li数组,所得到的才是我们想要的。

    另外一个道理也是一样的,因为整个最大的整体是div,所以对应不了li数组导致后面有错,在div(tab-list)下求div数组即可。

    channe...

    刚好那段是我自己对照打上去的,出错后,我还核对了几次都看不出错在哪,毕竟有些函数还是看不懂

    2016-07-31 12:32:42

    共 2 条回复 >

JavaScript进阶篇

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

468869 学习 · 22582 问题

查看课程

相似问题