关于下拉菜单的li遍历问题!

现在为什么显示不出来子菜单呢?
我的理解是:当循环到li[1]的时候与num==i相等啊?然后显示子菜单,但为什么不显示呢?
还有啊.我这样赋值var i=1;就正常显示了.但在firebug中仍提示错误.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none;}
#list{width:600px;height:120px;border:1px solid orange;margin:30px auto;}
#list li{float:left;width:90px;background:orange;text-align:center;font-size:12px;line-height:20px;margin-right:1px}
.subList{ background:pink;height:25px;line-height:25px;clear:both;width:300px} 
.subList p{float:left;font-size:14px}
</style> <script type="text/javascript">
function subList(num){
var list = document.getElementById("list");
var li = list.getElementsByTagName("li");
for(var i=0; i<li.length; i++){
if(i == num){
document.getElementById("subList"+i).style.display = "block";
}
else{
document.getElementById("subList"+i).style.display = "none";
}
}
}
</script> </head> <body>
<div id="list">
<ul>
<li>
<a href="">首页</a>

</li>
<li onmouseover="subList(1)">
<a href="">游戏</a>

</li>
<li onmouseover="subList(2)">
<a href="">音乐</a>

</li>
<li><a href="">新闻</a></li>
<li><a href="">产品</a></li>
<li><a href="">论坛</a></li>
</ul>

<div id="wrap1">
<div class="subList" id="subList1" style="display:none">
<p><a href="">子菜单2</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
</div>
</div>
<div id="wrap2">
<div class="subList" id="subList2" style="display:none">
<p><a href="">子菜单3</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
<p><a href="">子菜单</a></p>
</div>
</div>
</div>
 </body>
</html>

解决方案 »

  1.   

    当然报错了
    你上面从0到6开始循环，并试图操作subList0-subList5六个元素的样式。但是下面的只有subList1，subList2。两个元素
      

  2.   

    那怎么让它只显示subList1，subList2
      

  3.   

    <script type="text/javascript">
                        function subList(num){
                                    var list = document.getElementById("list");
                                    var li = list.getElementsByTagName("li");
                                    for(var i=1; i<3; i++){
                                                if(i == num){
                                                            document.getElementById("subList"+i).style.display = "block";
                                                }
                                                else{
                                                            document.getElementById("subList"+i).style.display = "none";
                                                }
                                    }
                        }
            </script>
      

  4.   

    看到LZ这样的做法不得不说LZ对于JS遍历一点都不懂!