css+js 实现的简单选项卡，为什么不兼容火狐？望指教~


<!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=utf-8" />
<title>Tab Test</title><script type='text/javascript'>
function showformN(id)
{
var n;
whichEl = eval("dn" + id);
eval("dn" + id + ".style.display=\"\";");
eval("NewsMemuTable" + id + ".className=\"NewsActive\";") for(n=1;n<=2;n++)
if (n!=id)
eval("dn" + n + ".style.display=\"none\";");
for(n=1;n<=2;n++)
if (n!=id)
eval("NewsMemuTable" + n + ".className=\"NewsInactive\";");}
</script>
<style type="text/css">#lefttab ,#righttab {float:left;}
ul,li,a,p,span{margin:0; padding:0; list-style-type:none; text-decoration:none;}
#righttab {margin:0px; padding:0;display:inline;}
#righttitle{margin:0px; padding:0;width:345px;}
#righttitle #title {background-image:url(../images/titlebtn.gif);width:79px;height:26px;text-align:center;font-weight:bold;color:#ffffff;line-height:26px;}
#rightbody{ width:345px;}#newsnav ul {margin:0px; padding:0;width:345px;}
#newsnav li {margin:0px; padding:0;float:left;background-image:url(../images/tabbg.jpg);width:79px;height:26px;color:#000;text-align:center;line-height:26px;font-weight:bold;cursor:pointer; list-style:none; display:inline;}
#newsnav li.NewsActive {color:#000; font-family:"微软雅黑", "宋体"; font-size:12px; font-weight:normal;background-position: 50% top; }
#newsnav li.NewsInactive {color:#000; font-family:"微软雅黑", "宋体"; font-size:12px; font-weight:normal;background-position: 50% bottom;}
.tabmore{width:187px; border-bottom:2px solid #CCCCCC; float:right; margin:0;padding-left:0; padding-bottom:8px;}a:hover{text-decoration:underline;}
#newslists {width:345px; margin-top:5px;float:left;}
#newslists li {width:345px;height:22px;line-height:22px;display:block;background-image:url(../images/newsdot.gif);background-repeat:no-repeat;background-position:4px;}
#newslists .news_span {color:#ccc;float:right;}
#newslist {margin-top:5px;float:left;}
#newslist ul {width:345px;}
#newslist li {width:345px;height:22px;line-height:22px;display:block;background-image:url(../images/newsdot.gif);background-repeat:no-repeat;background-position:4px;}
#newslist .news_span {color:#ccc;float:right;}</style>
</head><body><div id="righttab">
<div id="righttitle">
        <div id="newsnav" >
            <ul>
                <li class="NewsActive" id="NewsMemuTable1"  onmouseover="showformN(1)">新闻中心</li>
                <li class="NewsInactive" id="NewsMemuTable2"  onmouseover="showformN(2)">新品推荐</li>
            </ul>
        </div>
        <div style="clear:both"></div>
        
    </div>
    <div id="rightbody">
     <div id="newstab">
            <div id="dn1" style="display:block">
                <div id="tab1">
               aaaaaaaaaaaaaaaaa
              </div>
            </div>
            <div id="dn2" style="display:none;">
                <div id="tab2"> bbbbbbbbbbbbbb</div>
            </div>
        </div>
        <div style="clear:both">
        </div>
    </div>   
</div></body>
</html>

解决方案 »

  1.   

    楼主怎么怎么大量的使用eval...
    whichEl = eval("dn" + id);
    这个的意思是 whichEl  = getElementById("dn" + id)?
      

  2.   

    获取节点请用getElementById这些方法，，不要用eval...function showformN(id) {
        var n,
         el = document.getElementById("dn" + id);
        el.style.display = "";
        
        document.getElementById("NewsMemuTable" + id).className = "NewsActive";        for(n=1;n<=2;n++) {
            if (n != id) {
             document.getElementById("dn" + n).style.display = "none";    
            }            
        }
        for(n=1;n<=2;n++) {
            if (n!=id) {
             document.getElementById("NewsMemuTable" + n).className = "NewsInactive";   
            }
    }}
      

  3.   

    IE下，可以使用 eval(”idName”) 或 getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
      

  4.   


    就是在百度上搜所css+js 选项卡就出现一堆，呵呵~