<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/><title> Untitled document </title><link href=" Http://www.happyshow.org/sample/20060615/css /main.css "rel=" stylesheet "type=" Text/css "><link href=" http://www.happyshow.org/sample/20060615/css/ Class.css "rel=" stylesheet "type=" Text/css "><script src=" Http://www.happyshow.org/sample/20060615/nav.js " Type= "Text/javascript" ></script><script type= "text/javascript" >var = 0; Preset item var subclass = new Array () subclass[0] = "<ol><li> movie </li><li> restaurant </li><li> Performance </li></ol> "subclass[1] =" <ol><li> necklace </li><li> ring </li><li> Earrings </li></ol> "subclass[2] =" <ol><li> eat </li><li> travel </LI></ol> "subclass[3] =" <ol><li> million Almanac </li><li> my birthday </li><li> her birthday </li> </ol> "subclass[4] =" <ol><li> taurus </li><li> sagittarius </li><li> scorpion block </li> <li> Aquarius </li></ol> "</script></pead><body ><div id=" con "><div id=" Logo "> <div id= "Search" > <input name= "userpass2" type= "text" class= "Inputbox1" id= "Userpass2"/></div><div id=" nav "><ul id=" Itemlist "><li><a href=" http://www.happyshow.org/sample/20060615/index.html "><span class=" Style0 "> Dating arrangement </span></a></li><li><a href=" Http://www.happyshow.org/sample/20060615/index2.html "><span class=" Style0 "> Gift arrangement </span></a></li>< Li><a href= "#" ><span class= "STYLE0" > topic arrangement </span></a></li><li><a href= "#" ><span class= "Style0" > Calendar </span></a></li><li><a href= "#" ><span class= " Style0 "> Test constellation </span></a></li><li><a href=" # "><span style=" width:15px;padding : 0px "class=" Style0 "> </span></a></li></ul></div></div><div id=" Subclass "> </div><div id=" Content "> My blog: <br/> <a href=" http://www.happyshow.org "target=" _b Three states of Lank ">http://www.happyshow.org</a><br> <br/> <br/> <br/> navigation bar: <br/&G t;<br/> <p class= "Style0" >style0</p> <p class= "Style1" >style1</p> <p class= " Style2 ">style2</p> </div></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Code that has been encapsulated into a JS file:
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";
}
}
In the process of code writing, it is found that Firefox has a great difference between DOM interpretation and IE's interpretation of DOM. Although the above code is also compatible with FF, the implementation of the method is not very standard, the recent need to cram the DOM under FF.
At present, this effect can only be applied to the site navigation bar, if you want to make a italic effect of the tab, you need to adjust the code, but it is not expected to rewrite, hehe
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
