msn上的tab功能Firefox對(duì)childNodes處理的一個(gè)BUG
更新時(shí)間:2008年01月21日 13:11:38 作者:
今天公司用到一個(gè)tab功能發(fā)現(xiàn) msn上的不錯(cuò),但是在firefox兼容不好,msn他們的方法就是用了不少的div包含,不過網(wǎng)上有高人解決了。
Firefox對(duì)childNodes處理的一個(gè)BUG
childNodesFirefox在處理childNodes沒有過濾換行與空格。所以在初次使用的時(shí)候,得到效果不是預(yù)期的效果。
HTML
<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
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";
}
在IE上menuList的childNodes.length的值為5,而在Firefox值為11.因此我們?cè)谑褂胏hildNodes對(duì)象時(shí)需要先對(duì)其判斷或去掉空格。
childNodesFirefox在處理childNodes沒有過濾換行與空格。所以在初次使用的時(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";
}
在IE上menuList的childNodes.length的值為5,而在Firefox值為11.因此我們?cè)谑褂胏hildNodes對(duì)象時(shí)需要先對(duì)其判斷或去掉空格。
相關(guān)文章
超級(jí)susymenu實(shí)現(xiàn)top菜單
超級(jí)susymenu實(shí)現(xiàn)top菜單...2007-09-09css 有彈動(dòng)效果的網(wǎng)頁導(dǎo)航
發(fā)了個(gè)韓國網(wǎng)站(www.firstkids.co.kr)給我,讓我用CSS寫一個(gè)類似這個(gè)網(wǎng)站的導(dǎo)航欄效果。思路是:背景圖像定位!2009-10-10騰訊QQ網(wǎng)頁在線客服,隱藏在網(wǎng)頁一側(cè)的隱現(xiàn)效果二
騰訊QQ網(wǎng)頁在線客服,隱藏在網(wǎng)頁一側(cè)的隱現(xiàn)效果二...2007-03-03