虽然有些不太明白,但是照着教程的答案敲,为什么JS代码没反应?

来源:10-1 编程挑战

未來Miral

2016-12-07 11:20

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

    *{  

        padding:0px;

        margin:0px;

        font:12px normal 'microsoft yahei';

    }

    #a1{

        width:290px;

        padding:5px;

        height:158px;

        margin:38px;

    }

    #a1 ul{ 

        list-style:none;

        display:block;

        height:29px;

        line-height:38px;

        border-bottom:2px saddlebrown solid;

    }

    #a1 ul li{

        background:#fff;

        cursor:pointer;

        float:left;

        list-style:none;

        height:28px;

        line-height:28px;

        margin:0px 3px;

        border:1px solid #aaa;

        border-bottom:none;

        display:inline;

        width:68px;

        text-align:center;

    }

    #a1 ul li.top{

        border-top:2px solid saddlebrown;

        border-bottom:2px solid #fff;

    }

    #a1 div{

        height:120px;

        line-height:25px;

        border:1px solid #336699;

        border-top:none;

        padding:5px;

    }

    .hide{

        display:none;

    }

       

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var otab = document.getElementById('a1');

            var oul = otab.getElementsByTagName('ul')[0];

            var oli = oul.getElementsByTagName('li');

            var odiv = oli.getElementsByTagName('div');

            

            for(var i=0,len=oli.length;i<len;i++)

            {

                oli[i].index = i;

                oli[i].onclick = function()

                {

                    for(var n=0;n<len;n++)

                    {

                        oli[n].className = '';

                        odiv[n].className = 'hide';

                    }

                this.className = 'on';

                odiv[this.index].className = '';

                } 

            }

        } 

   

    

    

    </script>

 

</head>

<body>

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

<div id='a1'>

    <ul>

        <li>房产</li>

        <li>家居</li>

        <li>二手房</li>

    </ul>

<div>

    275万购昌平邻铁三居 总价20万买一居<br>

    200万内购五环三居 140万安家东三环<br>

    北京首现零首付楼盘 53万购东5环50平<br>

    京楼盘直降5000 中信府 公园楼王现房<br>

</div>

<div>

     40平出租屋大改造 美少女的混搭小窝<br>

     经典清新简欧爱家 90平老房焕发新生<br>

     新中式的酷色温情 66平撞色活泼家居<br>

     瓷砖就像选好老婆 卫生间烟道的设计<br>

</div>

<div>

     通州豪华3居260万 二环稀缺2居250w甩<br>

     西3环通透2居290万 130万2居限量抢购<br>

     黄城根小学学区仅260万 121平70万抛!<br>

     独家别墅280万 苏州桥2居优惠价248万<br>

</div>

</div>

</body>

</html>



写回答 关注

1回答

  • 该比率
    2016-12-07 11:45:28
    已采纳

     var odiv = oli.getElementsByTagName('div');这句话错了,,应该改为:

     var odiv = otab .getElementsByTagName('div');

    未來Mira...

    非常感谢!

    2016-12-07 14:09:14

    共 1 条回复 >

JavaScript进阶篇

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

468783 学习 · 22528 问题

查看课程

相似问题