js 在FF下不起作用


<script>
function tabit(btn){
var idname = new String(btn.id);
var s = idname.indexOf("_");
var e = idname.lastIndexOf("_")+1;
var tabName = idname.substr(0, s);
var id = parseInt(idname.substr(e, 1));
var tabNumber = btn.parentNode.childNodes.length;
for(var i=0;i<tabNumber;i++){
var currentDiv = document.getElementById(tabName+"_div_"+i);
if(currentDiv != null){// 加上判断就可以了，估计是因为出错时FF自动中止，而IE继续
currentDiv.style.display = "none";
currentDiv.className = "";
}
}
document.getElementById(tabName+"_div_"+id).style.display = "block";
btn.className = "home";// 由于没有给出 .home 的样式，导致标题栏不可见
}
</script>

解决方案 »

  1.   

    var id = parseInt(idname.substr(e, 1));
    这里解析数字,最后再加一参数,表示要解析成什么进制的数,不然当idname.substr(e, 1)是String时,可能会出错var id = parseInt(idname.substr(e, 1),10);
      

  2.   

    var id = parseInt(idname.substr(e, 1));
    这里解析数字,最后再加一参数,表示要解析成什么进制的数,不然当idname.substr(e, 1)是String时,可能会出错var id = parseInt(idname.substr(e, 1),10);
      

  3.   

    本人不懂js, 谢谢各位了。按照1楼的方法，FF下面已经基本可以了，但现在有个问题，在鼠标滑过以后，背景不会变回原来的，变成这样了
    另外，我想问一下，怎么改一下，让点击后的栏目变成被选中的状态呢（改变class)？
      

  4.   

    为了测试，定义了3个样式 .home1 .home2 .blankStyle
    分别表示 鼠标悬停、鼠标点击、还原 的样式
    可随需要修改本来想定义为 .home ，但如果这样标题就显示为空白
    难道home 有特殊含义？系统保留关键词？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML> 
    <HEAD> 
    <TITLE></TITLE>
    <style>
    #nav{position:absolute;top:29px;left: 250px;}
    #nav ul{list-style:none;}
    #nav ul li{float:left; height:46px; cursor:pointer;}
    #nav ul li a{color:#336666; padding:0 12px 0 12px;text-align:center;text-decoration:none;height:46px;font:bold 14px/36px "Microsoft Yahei","Microsoft JhengHei",sans-serif;}
    #nav ul li.home,#nav ul li.home a{background:url(img/main_r2_c10.png) repeat-x 0 0; color:#FFFFFF;}
    #snav ul{position:absolute; top:76px;left: 230px; list-style:none;}
    #snav ul li{float:left;}
    #snav ul li a{color:#FFFFFF; margin:0 10px 0 10px; text-decoration:none; font:bold 12px/28px "Microsoft Yahei","Microsoft JhengHei",sans-serif; display:block;}
    #snav ul li a:hover{position:relative; top:-2px;}
    .home1{background-color:yellow;}
    .home2{background-color:blue;}
    .blankStyle{}
    </style><script>
    var oldTitle = "tabnav_btn_0";// 上一次显示的标题ID
    function tabit(btn){
    var idname = new String(btn.id);
    var s = idname.indexOf("_");
    var e = idname.lastIndexOf("_")+1;
    var tabName = idname.substr(0, s);
    var id = parseInt(idname.substr(e, 1));
    var tabNumber = btn.parentNode.childNodes.length;
    for(var i=0;i<tabNumber;i++){
    var currentDiv = document.getElementById(tabName+"_div_"+i);
    if(currentDiv != null){
    currentDiv.style.display = "none";
    }
    }
    document.getElementById(tabName+"_div_"+id).style.display = "block";
    btn.className = "home1";
    if(oldTitle != oldSelectedTitle){
    document.getElementById(oldTitle).className = "blankStyle";
    }
    oldTitle = btn.id;
    }// 点击后变色
    var oldSelectedTitle = "tabnav_btn_0";
    function showSelectedTitle(newId){
    document.getElementById(oldSelectedTitle).className = "blankStyle";
    document.getElementById(newId).className = "home2";
    oldSelectedTitle = newId;
    }
    </script>
    </HEAD> <BODY><div id="nav">
    <ul>
    <li id="tabnav_btn_0" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/" >首页</a></li>
    <li id="tabnav_btn_1" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/leeds/">利兹留学</a></li>
    <li id="tabnav_btn_2" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/bradford/">布拉德福留学</a></li>
    <li id="tabnav_btn_3" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/rank/">大学排名</a></li>
    <li id="tabnav_btn_4" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/visa/">签证指南</a></li>
    <li id="tabnav_btn_5" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/general/">留学生活</a></li>
    <li id="tabnav_btn_6" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="/v5/policy/">留学政策</a></li>
    <li id="tabnav_btn_7" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://bbs.leedsren.com">校友社区</a></li>
    </ul>
    </div>
    <div id="snav"><ul>
    <div id="tabnav_div_0">&nbsp;</div>
    <div id="tabnav_div_1" style="display:none;"><li><a href="/v5/leeds/lu/">利兹大学</a></li><li><a href="/v5/leeds/lmu/">利兹城市大学</a></li><li><a href="/v5/leeds/city/">利兹城市导航</a></li></div>
    <div id="tabnav_div_2" style="display:none;"><li><a href="/v5/bradford/bradu/">布拉德福德大学</a></li><li><a href="/v5/bradford/city/">布拉德福德城市导航</a></li></div><div id="tabnav_div_3" style="display:none;">3</div>
    <div id="tabnav_div_4" style="display:none;">4</div>
    <div id="tabnav_div_5" style="display:none;">5</div>
    <div id="tabnav_div_6" style="display:none;">6</div>
    <div id="tabnav_div_7" style="display:none;">7</div>
    </ul>
    </div></BODY> 
    </HTML>
      

  5.   

    不行啊, 鼠标移上去一会有背景,一会没有.还有, 点击以后,页面刷新就没有作用了.  这个效果如果做框架的应该没问题。你可以多做几个测试页面，把 href地址换成这些测试页面，你就明白我说的了。
      

  6.   


    晕，刚做好，还是贴出来吧<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML> 
    <HEAD> 
    <TITLE></TITLE>
    <style>
    #nav{position:absolute;top:29px;left: 250px;}
    #nav ul{list-style:none;}
    #nav ul li{float:left; height:46px; cursor:pointer;}
    #nav ul li a{color:#336666; padding:0 12px 0 12px;text-align:center;text-decoration:none;height:46px;font:bold 14px/36px "Microsoft Yahei","Microsoft JhengHei",sans-serif;}
    #nav ul li.home,#nav ul li.home a{background:url(img/main_r2_c10.png) repeat-x 0 0; color:#FFFFFF;}
    #snav ul{position:absolute; top:76px;left: 230px; list-style:none;}
    #snav ul li{float:left;}
    #snav ul li a{color:#FFFFFF; margin:0 10px 0 10px; text-decoration:none; font:bold 12px/28px "Microsoft Yahei","Microsoft JhengHei",sans-serif; display:block;}
    #snav ul li a:hover{position:relative; top:-2px;}
    .home1{background-color:yellow;}
    .home2{background-color:blue;}
    .blankStyle{}
    </style><script>
    function tabit(btn){
        var idname = new String(btn.id);
        var s = idname.indexOf("_");
        var e = idname.lastIndexOf("_")+1;
        var tabName = idname.substr(0, s);
        var id = parseInt(idname.substr(e, 1));
        var tabNumber = btn.parentNode.childNodes.length;
        for(var i=0;i<tabNumber;i++){
            var currentDiv = document.getElementById(tabName+"_div_"+i);
            if(currentDiv != null){
                currentDiv.style.display = "none";
            }
        }
        document.getElementById(tabName+"_div_"+id).style.display = "block";
        for(var i=0;i<tabNumber;i++){
            var currentDiv = document.getElementById("tabnav_btn_"+i);
    if(currentDiv != null && oldTitleId != currentDiv.id){
                currentDiv.className = "blankStyle";
    }
        }
        if(btn.id != oldTitleId){
    btn.className = "home1";
        }
    }// 点击后变色
    var oldTitleId = "tabnav_btn_0";
    function showSelectedTitle(newId){
        for(var i = 0; i < 7; i++){
            var currentDiv = document.getElementById("tabnav_btn_"+i);
    if(currentDiv != null && oldTitleId != newId){
                currentDiv.className = "blankStyle";
    }
        }
        document.getElementById(newId).className = "home2";
        oldTitleId = newId;
    }</script>
    </HEAD> <BODY><div id="nav">
    <ul>
    <li id="tabnav_btn_0" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.sina.com.cn/" target="_blank" >首页</a></li>
    <li id="tabnav_btn_1" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.163.com/" target="_blank">利兹留学</a></li>
    <li id="tabnav_btn_2" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.sohu.com/" target="_blank">布拉德福留学</a></li>
    <li id="tabnav_btn_3" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.sina.com/" target="_blank">大学排名</a></li>
    <li id="tabnav_btn_4" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.yahoo.com/" target="_blank">签证指南</a></li>
    <li id="tabnav_btn_5" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.google.cn/" target="_blank">留学生活</a></li>
    <li id="tabnav_btn_6" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.baidu.com/" target="_blank">留学政策</a></li>
    <li id="tabnav_btn_7" onmouseover="tabit(this)" onmousedown="showSelectedTitle(this.id)"><a href="http://www.ouboe.com/" target="_blank">校友社区</a></li>
    </ul>
    </div>
    <div id="snav"><ul>
    <div id="tabnav_div_0">&nbsp;</div>
    <div id="tabnav_div_1" style="display:none;"><li><a href="/v5/leeds/lu/">利兹大学</a></li><li><a href="/v5/leeds/lmu/">利兹城市大学</a></li><li><a href="/v5/leeds/city/">利兹城市导航</a></li></div>
    <div id="tabnav_div_2" style="display:none;"><li><a href="/v5/bradford/bradu/">布拉德福德大学</a></li><li><a href="/v5/bradford/city/">布拉德福德城市导航</a></li></div><div id="tabnav_div_3" style="display:none;">3</div>
    <div id="tabnav_div_4" style="display:none;">4</div>
    <div id="tabnav_div_5" style="display:none;">5</div>
    <div id="tabnav_div_6" style="display:none;">6</div>
    <div id="tabnav_div_7" style="display:none;">7</div>
    </ul>
    </div></BODY> 
    </HTML>