问答详情
源自：10-1 编程挑战

请大家帮我看下我的代码哪里有问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */

     *{margin:0;padding:0;font:normal 12px "微软雅黑";color:#000000;}

     ul,li{list-style-type: none;}

     a{text-decoration: none;}

     .navbar{border-bottom:solid 2px red;height:38px;}

     .navbar li{float:left;width:60px;padding :5px;margin:10px 10px 0 0;border : solid 2px #ccc;text-align:center;} 

     .navbar li:hover{cursor:pointer};

     .navbar li:active{border-top:solid 2px red;border-bottom:solid 2px #fff;}

     

     #tab-list div{clear:both;border:solid 1px #ccc;padding : 10px 0 30px 5px;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 nav = document.getElementsByClassName("navbar");

        var nli = nav.getElementsByTagName("li");

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

        var ndiv = bdiv.getElementsByTagName("div");

        for(var i = 0;i<nli.length;i++){

            nli[i].index = i;

            nli[i].onclick = function(){

                for(var j =0;j<nli.length;j++){

                    nli[j].className = "";

                } 

                this.className = "active";

                for(var n =0;n<ndiv.length;n++){

                    ndiv[n].className ="hide";

                }

                ndiv[this.index].className = "show";

            }

        }

    }

    

    </script>

 

</head>

<body>

<!-- HTML页面布局 -->

<div id = "tab-list">

    <ul>

        <li>房产</li>

        <li>家居</li>

        <li>二手房</li>

    </ul>

    <div>

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

    </div>

    <div>

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

    </div>

    <div>

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

    </div>

</div>


 

</body>

</html>


提问者：微风灬唐唐 2017-08-10 11:16

个回答

  • 山_3
    2017-08-28 12:35:52
    已采纳

    var nav = document.getElementsByClassName("navbar");//你没有navbar这个class  调用出的nav变量为空

            var nli = nav.getElementsByTagName("li");//因为nav为空 所以就没法找到li元素 就会报错

    nav 变量也应该用ById获取




    0
  • 拥牙令
    2017-08-28 05:55:47

    问题太多了，但我就挑这个回答你吧，要document对象才能调用getElementsByTagName方法

    0
  • 微风灬唐唐
    2017-08-10 11:18:47

    Uncaught TypeError: nav.getElementsByTagName is not a function 报错是这个，我看了一下代码的名称，没有写错，请各位帮看看什么问题？

    0