当前位置：首页 → 问答吧 → 超简单JS代码的TAB效果，为什么Firefox不起作用?

超简单JS代码的TAB效果，为什么Firefox不起作用?

时间：2010-09-19

来源：互联网

<!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=gb2312" /> <title>超简单JS代码,DIV+CSS打造TAB选项卡效果</title> <style type="text/css">  </style> </head> <body> <script language=javascript> function secBoard(n) { for(i=0;i<menu.childNodes.length;i++) menu.childNodes[i].className="sec1"; menu.childNodes[n].className="sec2"; for(i=0;i<main.childNodes.length;i++) main.childNodes[i].style.display="none"; main.childNodes[n].style.display="block"; } </script> <div id="header">  <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul>   <ul id="main"> <li class="block">第一个内容,<a href="xx" target="_blank">预防蜱虫必知的11个知识问答</a></li> <li class="unblock">第二个内容,<a href="xx" target="_blank">购物商城限时抢购，倒计时JS代码</a></li> <li class="unblock">第三个内容,<a href="xx" target="_blank">落魄千万富翁的一首歌—很man！</a></li> <li class="unblock">第四个内容,<a href="xx" target="_blank">七十六个网站用户体验要点</a></li> </ul>  </div> </body> </html>
提示：您可以先修改部分代码再运行

请教高手解决？不胜感激

作者: webbise 发布时间: 2010-09-19

<!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=gb2312" /> <title>超简单JS代码,DIV+CSS打造TAB选项卡效果</title> <style type="text/css">  </style> </head> <body> <script language=javascript> function secBoard(n) { try { var menu = document.getElementById('menu').getElementsByTagName('li'); var main = document.getElementById('main').getElementsByTagName('li'); } catch (e) { return; } for (i = 0; i < menu.length; i++) { menu[i].className = "sec1"; } menu[n].className = "sec2"; for (i = 0; i < main.length; i++) { main[i].style.display = "none"; } main[n].style.display = "block"; } </script> <div id="header">  <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul>   <ul id="main"> <li class="block">第一个内容,<a href="#" target="_blank">预防蜱虫必知的11个知识问答</a></li> <li class="unblock">第二个内容,<a href="#" target="_blank">购物商城限时抢购，倒计时JS代码</a></li> <li class="unblock">第三个内容,<a href="#" target="_blank">落魄千万富翁的一首歌—很man！</a></li> <li class="unblock">第四个内容,<a href="#" target="_blank">七十六个网站用户体验要点</a></li> </ul>  </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: faeng220 发布时间: 2010-09-19

首先，获取menu和main对象，不能直接写menu,main,这种写法只有ie only
要这么获取 document.getElementById('menu')

还有childNodes在非ie下面，会把文本节点也算进去。li之间的回车他也认为是一个node的。所以得排除掉。
当然，由于ff3.5也支持了children属性，所以不考虑ff之前版本的话，也可以用children代替。

作者: ONEBOYS 发布时间: 2010-09-19

<!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=gb2312" /> <title>超简单JS代码,DIV+CSS打造TAB选项卡效果</title> <style type="text/css"> #header { background-color: #F8F4EF; height: 200px; width: 400px; border: 1px solid #ECE1D5; font-family: "宋体"; font-size: 12px; } #menu { margin: 0; padding: 0; list-style-type: none; } #menu li { display: block; width: 100px; line-height:23px; text-align: center; float: left; cursor: hand; } .sec1 { background-color: #FFFFCC;} .sec2 { background-color: #00CCFF;} .block { display: block;} .unblock { display: none;} </style> </head> <body> <script language=javascript> function $$(id) {return document.getElementById(id);} function secBoard(n) { var curIndex = $$("menu").getElementsByTagName("li"); var showIndex = $$("main").getElementsByTagName("li"); for (j = 0; j < curIndex.length; j++) { if(j==n){curIndex[n].className="sec2";}else{curIndex[j].className="sec1";} } for(i = 0; i < showIndex.length; i++) { if(i==n){showIndex[n].style.display = "block"}else{showIndex[i].style.display = "none"} } } </script>> <div id="header">  <ul id="menu"> <li onMouseOver="secBoard(0)" class="sec2">最新新闻</li> <li onMouseOver="secBoard(1)" class="sec1">最新文章</li> <li onMouseOver="secBoard(2)" class="sec1">最新日志</li> <li onMouseOver="secBoard(3)" class="sec1">论坛新帖</li> </ul>   <ul id="main"> <li class="block">第一个内容,<a href="xx" target="_blank">预防蜱虫必知的11个知识问答</a></li> <li class="unblock">第二个内容,<a href="xx" target="_blank">购物商城限时抢购，倒计时JS代码</a></li> <li class="unblock">第三个内容,<a href="xx" target="_blank">落魄千万富翁的一首歌—很man！</a></li> <li class="unblock">第四个内容,<a href="xx" target="_blank">七十六个网站用户体验要点</a></li> </ul>  </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: xiangzhenhua 发布时间: 2010-09-19

超简单JS代码的TAB效果，为什么Firefox不起作用?

热门阅读

热门下载