快捷導(dǎo)航

msn上的tab功能Firefox對(duì)childNodes處理的一個(gè)BUG

更新時(shí)間：2008年01月21日 13:11:38 作者：

今天公司用到一個(gè)tab功能發(fā)現(xiàn) msn上的不錯(cuò)，但是在firefox兼容不好，msn他們的方法就是用了不少的div包含，不過(guò)網(wǎng)上有高人解決了。

Firefox對(duì)childNodes處理的一個(gè)BUG
childNodesFirefox在處理childNodes沒(méi)有過(guò)濾換行與空格。所以在初次使用的時(shí)候，得到效果不是預(yù)期的效果。
HTML

復(fù)制代碼代碼如下:

 
<ul class="tbtn" ID="menuList"> 
<li class="curr" id="tabap3_btn_0" onclick="tabit(this)">理財(cái)大學(xué)B</li> 
<li id="tabap3_btn_1" onclick="tabit(this)">名醫(yī)講堂</li> 
<li id="tabap3_btn_2" onclick="tabit(this)">名醫(yī)講堂</li> 
<li id="tabap3_btn_3" onclick="tabit(this)">名醫(yī)講堂</li> 
<li class="lst" id="tabap3_btn_4" onclick="tabit(this)">影壇熱點(diǎn)</li> 
</ul> 

JS

復(fù)制代碼代碼如下:

 
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;    //IE和FF的值不同     
    for(i=0;i<tabNumber;i++) 
      { 
        if(document.getElementById(tabName+"_div_"+i)!=null)    //這里需要進(jìn)行判斷 
          { 
        document.getElementById(tabName+"_div_"+i).style.display = "none"; 
        document.getElementById(tabName+"_btn_"+i).style.backgroundImage = "url(pic/t-1-2.gif)"; 
        document.getElementById(tabName+"_btn_"+i).style.borderBottomColor = "#D7F2DA"; 
        document.getElementById(tabName+"_btn_"+i).style.cursor = "pointer"; 
        } 
    } 
    document.getElementById(tabName+"_div_"+id).style.display = "block"; 
    btn.style.backgroundColor = "#fff"; 
    btn.style.borderBottomColor = "#fff"; 
    btn.style.cursor = "default"; 
} 