效果:
运行代码框
[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
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器