<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><br/><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><br/><br/><head><br/><br/><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><br/><br/><title>无标题文档</title><br/><br/><br/><link href="http://www.happyshow.org/sample/20060615/css/main.css" rel="stylesheet" type="text/css"><br/><br/><br/><link href="http://www.happyshow.org/sample/20060615/css/class.css" rel="stylesheet" type="text/css"><br/><br/><br/><script src="http://www.happyshow.org/sample/20060615/nav.js" type="text/javascript"></script><br/><br/><br/><script type="text/javascript"><br/><br/><br/> var selectindex = 0; //预设项目<br/><br/><br/> var subclass = new Array()<br/><br/><br/> subclass[0] = "<ol><li>·电影</li><li>·餐厅</li><li>·演出</li></ol>";<br/><br/><br/> subclass[1] = "<ol><li>·项链</li><li>·戒指</li><li>·耳环</li></ol>"<br/><br/><br/> subclass[2] = "<ol><li>·吃饭</li><li>·旅游</li></ol>"<br/><br/><br/> subclass[3] = "<ol><li>·万年历</li><li>·我的生日</li><li>·她的生日</li></ol>"<br/><br/><br/> subclass[4] = "<ol><li>·金牛座</li><li>·射手座</li><li>·蝎子座</li><li>·水瓶座</li></ol>"<br/><br/><br/></script><br/><br/><br/></head><br/><br/><br/><br/><br/><br/><body onload="preset()"><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <img src="http://www.happyshow.org/sample/20060615/images/logo1.gif" width="94" height="75" border="0" align="bottom" /><br/><br/><br/> <img src="http://www.happyshow.org/sample/20060615/images/logo2.gif" width="108" height="63" border="0" align="bottom" style="margin-top:12px;"/> <br/><br/><br/> <br/><br/><br/><br/><br/> <input name="userpass2" type="text" class="inputbox1" id="userpass2" /><img src="http://www.happyshow.org/sample/20060615/images/searchbutton.gif" width="31" height="18" /><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> <ul id="itemlist" onmouseout="recover()"><br/><br/><br/> <li><a href="http://www.happyshow.org/sample/20060615/index.html"><span onmouseover="focusthis(this)" class="style0">约会安排</span></a></li><br/><br/><br/> <li><a href="http://www.happyshow.org/sample/20060615/index2.html"><span onmouseover="focusthis(this)" class="style0">礼物安排</span></a></li><br/><br/><br/> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">话题安排</span></a></li><br/><br/><br/> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">日历</span></a></li><br/><br/><br/> <li><a href="#"><span onmouseover="focusthis(this)" class="style0">测试星座</span></a></li><br/><br/><br/> <li><a href="#"><span style="width:15px;padding:0px" class="style0"> </span></a></li><br/><br/><br/> </ul> <br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/> 我的博客：<br /><br/><br/><br/> <a href="http://www.happyshow.org" target="_blank">http://www.happyshow.org</a><br/><br/><br/><br/> <br /><br/><br/><br/> <br /><br/><br/><br/> <br /><br/><br/><br/> 导航条的三种状态：<br /><br /><br/><br/><br/> <h5 class="style0">style0</h5><br/><br/><br/> <h5 class="style1">style1</h5><br/><br/><br/> <h5 class="style2">style2</h5><br/><br/><br/> <br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body><br/><br/><br/></html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
已经封装成 js 文件的代码：
// javascript Document function preset() { document.getElementById("itemlist").childNodes[selectindex].firstChild.firstChild.className="style1"; document.getElementById("itemlist").childNodes[selectindex+1].childNodes[0].childNodes[0].className="style2"; innersubclass(); } function focusthis(obj) { clearselect(); obj.className = "style1"; obj.parentNode.parentNode.nextSibling.firstChild.firstChild.className="style2"; innersubclass(obj); } function innersubclass(obj) { if (obj==null) { document.getElementById("subclass").innerHTML = subclass[selectindex]; }else { for(i=0; i { if(obj == document.getElementById("itemlist").childNodes[i].firstChild.firstChild) { document.getElementById("subclass").innerHTML = subclass[i]; } } } } function recover() { clearselect(); preset(); innersubclass(); } function clearselect() { for (i=0; i { document.getElementById("itemlist").childNodes[i].firstChild.firstChild.className="style0"; } }
在代码编写过程中，发现 Firefox 对 DOM 解释和 IE 对 DOM 的解释差别较大。虽然上面的代码也兼容ff，但实现的方法不太标准，近期需要补习一下 FF 下的DOM。
目前此效果仅能应用于网站导航条，如果要做成斜体的选项卡效果，还需要调整一下代码，但估计不用重写了，呵呵