|
效果：
运行代码框
[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<obj.parentNode.parentNode.parentNode.childNodes.length;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.length; i++)
{
document.getElementById("itemlist").childNodes[i].firstChild.firstChild.className="style0";
}
}
在代码编写过程中，发现 Firefox 对 DOM 解释和 IE 对 DOM 的解释差别较大。虽然上面的代码也兼容ff，但实现的方法不太标准，近期需要补习一下 FF 下的DOM。
目前此效果仅能应用于网站导航条，如果要做成斜体的选项卡效果，还需要调整一下代码，但估计不用重写了，呵呵
经典论坛讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2614732
出处：蓝色理想
责任编辑：moby
◎进入论坛网站综合、网页制作版块参加讨论
|