有关选项卡在firefox下失效的问题,望大家帮帮忙

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按钮切换</title>
<style type="text/css">
<!--
body
{
font: 12px Verdana, Arial, Helvetica, sans-serif,宋体,新宋体;
color:#000;
background:#fff;
}#con{ font-size:12px; width:600px; margin:0 auto;}
#tab1{height:23px;margin-left:10px;}
#tab1 ul{margin:0; padding:0;}
#tab1 li{float:left;margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none;}
#tab1 li a{float:left;background:url(images/tagright.gif) no-repeat right bottom;height:23px;padding:0px 10px;line-height:23px;color:#999;text-decoration:none;}
#tab1 li.selectTag{background-position:left top;position:relative;height:25px;margin-bottom:-2px}
#tab1 li.selectTag a{background-position:right top;color:#000;height:25px;line-height:25px;}#tabcontent{padding:1px; border:1px solid #aecbd4;width:100%;}#tabcontent #bg{background:url(images/bg.gif) repeat-x; height:200px; padding:10px; color:#474747; width:100%;}.none{display:none;}
/*第二个*/
#tab2{height:23px;margin-left:10px;margin-top:20px;}
#tab2 ul{margin:0; padding:0;}
#tab2 li{float:left;margin-right:1px; background:url(images/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none;}
#tab2 li a{float:left;background:url(images/tagright.gif) no-repeat right bottom;height:23px;padding:0px 10px;line-height:23px;color:#999;text-decoration:none;}
#tab2 li.selectTag{background-position:left top;position:relative;height:25px;margin-bottom:-2px}
#tab2 li.selectTag a{background-position:right top;color:#c00;font-weight:bold;height:25px;line-height:25px;}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (tabList[i].id == obj.id)
{
document.getElementById(tabObj+"_Title"+i).className = "selectTag"; 
    document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
document.getElementById(tabObj+"_Title"+i).className = "li"; 
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
} 
}
</script>
</head>
<body>
<div id="con">
    <div id="tab1">
        <ul>
          <li id="tab1_Title0" onclick="nTabs('tab1',this);" class="selectTag"><a href="javascript:void(0);">娱乐</a></li>
          <li id="tab1_Title1" onclick="nTabs('tab1',this);"><a href="javascript:void(0);">女人1111111111</a></li>
          <li id="tab1_Title2" onclick="nTabs('tab1',this);"><a href="javascript:void(0);">汽车</a></li>
        </ul>
      </div>
      <div id="tabcontent">
  <div id="bg">
        <div id="tab1_content0">娱乐的内容</div>
        <div id="tab1_content1" class="none">女人的内容</div>
        <div id="tab1_content2" class="none">汽车的内容</div>
</div>
      </div>
<!--第二个--><div id="tab2">
        <ul>
          <li id="tab2_Title0" onclick="nTabs('tab2',this);" class="selectTag"><a href="javascript:void(0);">国内机票实时查询</a></li>
          <li id="tab2_Title1" onclick="nTabs('tab2',this);"><a href="javascript:void(0);">国际机票查询</a></li>
          <li id="tab2_Title2" onclick="nTabs('tab2',this);"><a href="javascript:void(0);">酒店查询</a></li>
        </ul>
      </div>
      <div id="tabcontent">
  <div id="bg">
        <div id="tab2_content0">国内机票查询条件</div>
        <div id="tab2_content1" class="none">国际机票查询条件</div>
        <div id="tab2_content2" class="none">酒店查询条件</div>
</div>
      </div></div></body>
</html>
----------------------------------------------------------------
以上代码在ie下正常,但在firefox下却失效,不知道是哪儿的问题,望前辈指点