求大神，告诉我代码错在哪里了？结果就是出不来，用getElementsTagName获取的数组长度为什么是0？

源自：10-1 编程挑战

求大神，告诉我代码错在哪里了？结果就是出不来，用getElementsTagName获取的数组长度为什么是0？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
     /* CSS样式制作 */
        .li{
            float:left;
            width:60px;
            border-style:solid;
            border-bottom-style:none;
            border-width:thin;
            margin:10px;
            text-align:center;
            padding:5px;
            font-size:18px;
            font-weight:bold;
            list-style:none;
        }
       .div{
           position:absolute;
           border-style:solid;
           border-color:blue;
           width:300px;
           border-width:thin;
           word-spacing:15px;
           text-align:left;
           line-height:30px;
           padding:10px;
           font-weight:bold;
           top:120px;
           left:55px;
       }
    </style>
    <script type="text/javascript">
         var s=document.getElementsByTagName("li");
         var div=document.getElementsByTagName("div");
        for(var i=0;i<=s.length;i++)
           { li[i].onselect= function(){
                li[i].style.border.color="red";
                switch (i){
                    case 0 :
                    div[0].style.display="block";
                    div[1].style.display="none" ;
                    div[2].style.display="none";
                    break;
                    case 1 :
                    div[1].style.display="block";
                    div[0].style.display="none" ;
                    div[2].style.display="none";
                    break;

                    case 2 :
                    div[2].style.display="block";
                    div[0].style.display="none" ;
                    div[1].style.display="none";
                    break;
                    default:
                    break;


                    }
           }
            }
    // JS实现选项卡切换


    </script>

</head>
<body>

   <h1>选项卡</h1>
   <ul id="select">

       <li>房产</li>
       <div>275万购昌平邻铁三居总价20万买一居
     200万内购五环三居 140万安家东三环
     北京首现零首付楼盘 53万购东5环50平
     京楼盘直降5000 中信府公园楼王现房</div>

       <li>家居</li>
       <li>二手房</li>


   </ul>

</body>
</html>

提问者：醉生梦不死Zz 2015-01-08 01:12

个回答

在学习

2015-01-08 08:58:43

已采纳

长度为0是因为你没有获取到标签，原因是你的js代码放到了标签的上面，在文档加载到js时获取不到html，因为html还没有加载出来，解决办法可以将js放到后面或者给js外面套上window.onload = function(){}

1
sixGod

2015-01-08 09:00:30

注意代码的加载顺序，当你执行script时，页面还没出来呢，所以
getElementsByTagName得到的长度是0，把script放到代码最后面去

1
赵小布

2015-01-08 08:58:41

你把script这段代码放到ul后面执行

1