<style> *{ padding:0; margin:0; font:normal normal 12px/1.5em "宋体"; } #main{ margin:20px; } ul{ padding:0; margin:0; width:600px; } #tab li{ list-style:none; float:left; text-align:center; padding:0; } #tab a{ display:block; text-decoration:none; width:94px; line-height:24px; } #cont{ clear:both; border:1px solid blue; border-top:0; width:562px!important; width:564px; height:190px; overflow-y:hidden; } .common{ margin:5px; } .common li{ list-style:none; padding-left:14px!important; padding-left:0; padding-top:4px; } .common li a{ text-decoration:none; } .common li a:hover{ color:red; } .on{ background:url(http://files.myopera.com/arYee/practice/tabmenu/hover_tab.gif) no-repeat left bottom; } .off{ background:url(http://files.myopera.com/arYee/practice/tabmenu/normal_tab.gif) no-repeat left bottom; } </style> <script> function $(ID){ return document.getElementById(ID) } function showTab(ID){ for(var i=1;i<7;i++){ if(ID==i){ $("Tab"+i).className="on"; $("cont"+i).style.display="block"; }else{ $("Tab"+i).className="off"; $("cont"+i).style.display="none"; } } } </script> <div id="main"> <div id="tab"> <ul> <li><a href="#" id="tab1" class="on" onclick="showTab('1')">流行音乐</a></li> <li><a href="#" id="tab2" class="off" onclick="showTab('2')">美女写真</a></li> <li><a href="#" id="tab3" class="off" onclick="showTab('3')">平面设计</a></li> <li><a href="#" id="tab4" class="off" onclick="showTab('4')">网络学堂</a></li> <li><a href="#" id="tab5" class="off" onclick="showTab('5')">恋爱宝典</a></li> <li><a href="#" id="tab6" class="off" onclick="showTab('6')">QQ来的爱</a></li> </ul> </div> <div id="cont" > <div id="cont1" class="common" style="display:block;"> <li><a href="#">求佛</a></li> <li><a href="#">香水有毒</a></li> <li><a href="#">生都要爱</a></li> <li><a href="#">秋天不回来</a></li> <li><a href="#">求佛</a></li> <li><a href="#">香水有毒</a></li> <li><a href="#">生都要爱</a></li> <li><a href="#">秋天不回来</a></li> </div> <div style="display:none;" id="cont2" class="common"> <li><a href="#">22</a></li> <li><a href="#">222</a></li> <li><a href="#">222</a></li> <li><a href="#">2222</a></li> <li><a href="#">2222</a></li> <li><a href="#">2222</a></li> <li><a href="#">2222</a></li> <li><a href="#">2222</a></li> </div> <div style="display:none;" id="cont3" class="common"> <li><a href="#">333</a></li> <li><a href="#">333</a></li> <li><a href="#">3333</a></li> <li><a href="#">3333</a></li> <li><a href="#">3333</a></li> <li><a href="#">3333</a></li> <li><a href="#">33333</a></li> <li><a href="#">秋天不回来</a></li> </div> <div style="display:none;" id="cont4" class="common"> <li><a href="#">444</a></li> <li><a href="#">444</a></li> <li><a href="#">444</a></li> <li><a href="#">4444</a></li> <li><a href="#">444</a></li> <li><a href="#">444</a></li> <li><a href="#">4444</a></li> <li><a href="#">4444</a></li> </div> <div style="display:none;" id="cont5" class="common"> <li><a href="#">555</a></li> <li><a href="#">555</a></li> <li><a href="#">555</a></li> <li><a href="#">555</a></li> <li><a href="#">求佛</a></li> <li><a href="#">香水有毒</a></li> <li><a href="#">生都要爱</a></li> <li><a href="#">秋天不回来</a></li> </div> <div style="display:none;" id="cont6" class="common"> <li><a href="#">666</a></li> <li><a href="#">666</a></li> <li><a href="#">666</a></li> <li><a href="#">秋天不回来</a></li> <li><a href="#">求佛</a></li> <li><a href="#">香水有毒</a></li> <li><a href="#">生都要爱</a></li> <li><a href="#">秋天不回来</a></li></div> </div> </div>
 提示：您可以先修改部分代码再运行

1,FF下测试不通过,查了N次未找出原因,请高手帮看看
2,单击之后,选项上有个虑线框,如何除之?

1 超链接的href最好写成javascript:void(0)
2 ie忽略大小写不表示在js中大小写忽略是正常的。。注意你js中的id和html中的id的大小写区别
3 在你的showTab中ID==i的部分加入一句代码：

复制内容到剪贴板

代码:

$('tab'+i).blur();

引用:

原帖由 Sheneyan 于 2007-4-13 09:16 发表
1 超链接的href最好写成javascript:void(0)
2 ie忽略大小写不表示在js中大小写忽略是正常的。。注意你js中的id和html中的id的大小写区别3 在你的showTab中ID==i的部分加入一句代码：//在IE下有效,在FF下失效

$('tab'+i).blur();

这里用大小写ID没多大区别,
在IE下有效,在FF下失效

FF的代码规范要求要高些..

再顶一下,FF下没效果耶?

。。。我2楼已经说的很明白了……下面的代码就是我2楼的说法的实现，请对比你自己的代码，谢谢

<style> *{ padding:0; margin:0; font:normal normal 12px/1.5em "宋体"; } #main{ margin:20px; } ul{ padding:0; margin:0; width:600px; } #tab li{ list-style:none; float:left; text-align:center; padding:0; } #tab a{ display:block; text-decoration:none; width:94px; line-height:24px; } #cont{ clear:both; border:1px solid blue; border-top:0; width:562px!important; width:564px; height:190px; overflow-y:hidden; } .common{ margin:5px; } .common li{ list-style:none; padding-left:14px!important; padding-left:0; padding-top:4px; } .common li a{ text-decoration:none; } .common li a:hover{ color:red; } .on{ background:url(http://files.myopera.com/arYee/practice/tabmenu/hover_tab.gif) no-repeat left bottom; } .off{ background:url(http://files.myopera.com/arYee/practice/tabmenu/normal_tab.gif) no-repeat left bottom; } </style> <script> function $(ID){ return document.getElementById(ID) } function showTab(ID){ for(var i=1;i<7;i++){ if(ID==i){ $('tab'+i).blur(); $("tab"+i).className="on"; $("cont"+i).style.display="block"; }else{ $("tab"+i).className="off"; $("cont"+i).style.display="none"; } } return false; } </script> <div id="main"> <div id="tab"> <ul> <li><a href="javascript:void(0)" id="tab1" class="on" onclick="showTab('1')">流行音乐</a></li> <li><a href="javascript:void(0)" id="tab2" class="off" onclick="showTab('2')">美女写真</a></li> <li><a href="javascript:void(0)" id="tab3" class="off" onclick="showTab('3')">平面设计</a></li> <li><a href="javascript:void(0)" id="tab4" class="off" onclick="showTab('4')">网络学堂</a></li> <li><a href="javascript:void(0)" id="tab5" class="off" onclick="showTab('5')">恋爱宝典</a></li> <li><a href="javascript:void(0)" id="tab6" class="off" onclick="showTab('6')">QQ来的爱</a></li> </ul> </div> <div id="cont" > <div id="cont1" class="common" style="display:block;"> <li><a href="javascript:void(0)">求佛</a></li> <li><a href="javascript:void(0)">香水有毒</a></li> <li><a href="javascript:void(0)">生都要爱</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li> <li><a href="javascript:void(0)">求佛</a></li> <li><a href="javascript:void(0)">香水有毒</a></li> <li><a href="javascript:void(0)">生都要爱</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li> </div> <div style="display:none;" id="cont2" class="common"> <li><a href="javascript:void(0)">22</a></li> <li><a href="javascript:void(0)">222</a></li> <li><a href="javascript:void(0)">222</a></li> <li><a href="javascript:void(0)">2222</a></li> <li><a href="javascript:void(0)">2222</a></li> <li><a href="javascript:void(0)">2222</a></li> <li><a href="javascript:void(0)">2222</a></li> <li><a href="javascript:void(0)">2222</a></li> </div> <div style="display:none;" id="cont3" class="common"> <li><a href="javascript:void(0)">333</a></li> <li><a href="javascript:void(0)">333</a></li> <li><a href="javascript:void(0)">3333</a></li> <li><a href="javascript:void(0)">3333</a></li> <li><a href="javascript:void(0)">3333</a></li> <li><a href="javascript:void(0)">3333</a></li> <li><a href="javascript:void(0)">33333</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li> </div> <div style="display:none;" id="cont4" class="common"> <li><a href="javascript:void(0)">444</a></li> <li><a href="javascript:void(0)">444</a></li> <li><a href="javascript:void(0)">444</a></li> <li><a href="javascript:void(0)">4444</a></li> <li><a href="javascript:void(0)">444</a></li> <li><a href="javascript:void(0)">444</a></li> <li><a href="javascript:void(0)">4444</a></li> <li><a href="javascript:void(0)">4444</a></li> </div> <div style="display:none;" id="cont5" class="common"> <li><a href="javascript:void(0)">555</a></li> <li><a href="javascript:void(0)">555</a></li> <li><a href="javascript:void(0)">555</a></li> <li><a href="javascript:void(0)">555</a></li> <li><a href="javascript:void(0)">求佛</a></li> <li><a href="javascript:void(0)">香水有毒</a></li> <li><a href="javascript:void(0)">生都要爱</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li> </div> <div style="display:none;" id="cont6" class="common"> <li><a href="javascript:void(0)">666</a></li> <li><a href="javascript:void(0)">666</a></li> <li><a href="javascript:void(0)">666</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li> <li><a href="javascript:void(0)">求佛</a></li> <li><a href="javascript:void(0)">香水有毒</a></li> <li><a href="javascript:void(0)">生都要爱</a></li> <li><a href="javascript:void(0)">秋天不回来</a></li></div> </div> </div>
 提示：您可以先修改部分代码再运行

谢谢sheneyan,找了半天,就是因为一个字母的问题,Tab要改成tab,即FF对JS的大小写有严格的区分

[ 本帖最后由 winhero_charles 于 2007-4-29 14:12 编辑 ]