为了账号安全,请及时绑定邮箱和手机立即绑定

能不能帮我看一下问题出在哪里了呢?谢谢了 JavaScript进阶篇第十章

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

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

    <style type="text/css">

     /* CSS样式制作 */  

    *{margin:0;padding:0;font-family:"microsoft yahei";}

    #text{width:290px;

          padding:5px;

          height:150px;

          margin:20px;}

    #text ul{list-style:none;

             display: block;

             height:30px;

             line-height:30px;

             border-bottom:2px saddlebrown solid;

             }

    #text ul li{background:#fff;

                cursor:pointer; /*定义鼠标样式*/

                float:left;

                list-style:none; /*列表项不使用标记图像*/

                height:28px;

                line-height:28px;

                margin:0px 3px;

                border:1px solid #aaaaaa;

                border-bottom:none;

                display:inline-block;

                width:60px;

                text-align: center;}

    #text ul li.on{border-top:2px solid saddlebrown;

                   border-bottom: 2px solid #fff;}

    #text div{height:120px;

              line-height:25px;

              border:1px solid #336699;

              border-top:none;

              padding:5px;}

    .hide{display: none;}



    

    

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

    window.onload=function()

    {

      var oTe=document.getElementById("text");

      var oUl=oTe.getElementsByTagName("ul")[0];

      var oLi=oUl.getElementsByTagName("li");

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

      

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

       {

           oLi[i].index=i;

           oLi.onclick=function()

           {

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

               {

                  oLi[n].className = "";

                  oDiv[n].className ="hide";


               }

               this.className = "on";

               oDiv[this.index].className = "";

               

           }

       }

    }

    

    </script>

 

</head>

<body>

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

    

   <div id="text"> 

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

 oLi[i].onclick=function(),oLi少了下标

0 回复 有任何疑惑可以回复我~
#1

Missvia 提问者

非常感谢!
2015-12-24 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

能不能帮我看一下问题出在哪里了呢?谢谢了 JavaScript进阶篇第十章

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信