下面这个程序是个简单的Tab面板,为了能够兼容Firefox浏览器,在判断子节点时判断是否是元素节点,用了if (node[j].nodeType==1){   ,但firefox居然报的错误是 node[j] is undefined,明明定义了node[j],并且还可以用document.write输出它的值啊
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tab选项卡面板</title>
<style type="text/css">
<!--
#tab {
margin: 0px;
padding: 0 0 24px 0;
list-style-type: none;
border-bottom:1px solid #11a3ff;
}
#tab li {
font-size: 14px;
color: #993300;
float:left;
margin:0 4px 0 0;}
div { background-color: #FFeeee;
padding: 10px;
border-left:1px solid #11a3ff; /* 左边框 */
border-right:1px solid #11a3ff; /* 右边框 */
border-bottom:1px solid #11a3ff; /* 下边框 */
}
#info2 {
display: none;
}
#tab a {
display: block;/**/
float:left;
padding: 0 10px;
height:23px;
line-height:23px;
border: 1px solid #11a3ff;

text-decoration: none;
background-color: #BBDDFF;

}
#tab a:hover,#tab a.cur {
border-bottom: 1px solid #ffeeee;
color: #F74533;
background-color: #FFeeee;
}-->
</style>
<script type="text/JavaScript">
function changtab(n)
{
node=document.getElementById("tab").childNodes;
j=0;for(i=1;i<=node.length;j++)
{if (node[j].nodeType==1){    //firefox报的错误是 node[j] is undefined
document.getElementById('info'+(i)).style.display='none'; //将所有面板隐藏
document.getElementById('tab'+(i)).className='none';
i++
}}
document.getElementById('info'+n).style.display='block'; //显示当前面板
document.getElementById('tab'+n).className='cur';
}
</script></head><body>
<ul id="tab">
<li><a id="tab1" onmouseover="changtab(1)" class="cur" href="#">课程特色</a></li>
<li><a id="tab2" onmouseover="changtab(2)" href="#">教学方法</a></li>
</ul>
<div id="info1">
·<a href="#">本课程主要特色</a>&nbsp;<BR>
      ·<a href="#">课程地位</a>&nbsp;&nbsp;<BR>
      ·<a href="htm">目前还存在的不足</a><BR />
      &nbsp;
</div>
<div id="info2">
·<a href="zwpj-1.htm">教学方法和教学手段</a>&nbsp;<BR>
      ·<a href="zwpj-2.htm">课程的历史</a>&nbsp;&nbsp;<BR>
      ·<a href="zwpj-3.htm">目前还存在的优势</a><BR />
      &nbsp;
</div></body>
</html>

解决方案 »

  1.   

    替换成俺的js
    <script type="text/JavaScript">
    function changtab(n)
    {
    node=document.getElementById("tab").getElementsByTagName("li"); for(i=1;i<=node.length;i++)
    {
    if (node[i-1].nodeType==1){ //firefox报的错误是 node[j] is undefined
    document.getElementById('info'+(i)).style.display='none'; //将所有面板隐藏
    document.getElementById('tab'+(i)).className='none';
    }
    }
    document.getElementById('info'+n).style.display='block';  //显示当前面板
    document.getElementById('tab'+n).className='cur';
    }
    </script>
      

  2.   

    不行啊,在Firefox中node.length=5,而第2个和第4个的nodeType为1,这样会将这两个隐藏起来,而第一个不会隐藏起来,不对
      

  3.   

    哦, 是对的,你的代码关键是用了node=document.getElementById("tab").getElementsByTagName("li");这样就避免了用childNodes方法,Firefox会计算空格当文本节点的问题,又学到一点,谢谢了
      

  4.   

    node=document.getElementById("tab").getElementsByTagName("li");这个方法确实很好。不过用jquery会更好。