Like QQ, easy-to-use navbar
Last Update:2018-12-07
Source: Internet
Author: User
<! 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>
<Title> untitled page </title>
</Head>
<Body>
<Div id = 'navbar' style = "height: 490px; width: 300px; Background-color: Blue" navbartitleheight = "25px">
<Div style = "width: 100%; color: White; Vertical-align: middle;" class = "title" id = "div8">
<Div style = "cursor: pointer; Background-color: black;">
Basic Policy Information
</Div>
<Div style = "" id = "div9">
Asdsdafsadfasdf
</Div>
</Div>
<Div style = "width: 100%; color: White; Vertical-align: middle;" class = "title" id = "div1">
<Div style = "cursor: pointer; Background-color: black;">
Basic Policy Information
</Div>
<Div style = "" id = "div2">
Asdsdafsadfasdf
</Div>
</Div>
<Div style = "width: 100%; color: White; Vertical-align: middle;" class = "title" id = "div3">
<Div style = "cursor: pointer; Background-color: black;">
Basic Policy Information
</Div>
<Div style = "" id = "div4">
Asdsdafsadfasdf
</Div>
</Div>
</Div>
<Script language = "JavaScript" type = "text/JavaScript">
Function navbar (navbarname, selectitemindex)
{
Navbar. navbarobj = This. getrootnode (navbarname );
Navbar. Items = This. getitems ();
// Alert (navbar. Items. Length );
Navbar. selectitemindex = selectitemindex;
}
Navbar. Prototype. activeitem = function ()
{
For (VAR I = 0; I <navbar. Items. length; I ++)
{
If (navbar. selectitemindex = I)
{
Navbar. items [I]. content. style. Display = "";
}
Else
{
Navbar. items [I]. content. style. Display = "NONE ";
}
// Alert (I + "" + navbar. selectitemindex + "" + navbar. items [I]. content. ID + "" + navbar. items [I]. content. style. display );
}
}
Navbar. Prototype. getitems = function ()
{
VaR items = new array ();
For (VAR I = 0; I <navbar. navbarobj. childnodes. length; I ++)
{
Items [I] = new navbaritems (navbar. navbarobj. childnodes (I ));
If (navbar. navbarobj. navbartitleheight! = 'Undefined ')
{
Items [I]. Title. style. Height = navbar. navbarobj. navbartitleheight;
// Alert (navbar. navbarobj. style. height.-(navbar. navbarobj. childnodes. length * navbar. navbarobj. navbartitleheight )))
If (navbar. navbarobj. style. height! = '000000 ')
{
Items [I]. content. style. height = parseint (navbar. navbarobj. style. height)-(navbar. navbarobj. childnodes. length * parseint (navbar. navbarobj. navbartitleheight ));
}
}
}
Return items;
}
Navbar. Prototype. getrootnode = function (navbarname)
{
VaR root = Document. getelementbyid (navbarname );
Return root;
}
Function navbaritems (itemnode)
{
This. Title = itemnode. firstchild;
This. C. lastchild;
}
// Return Function
Function navbaritemcreate (navbarname, selectindex)
{
VaR navbar = new navbar (navbarname, selectindex );
Navbar. activeitem ();
}
</SCRIPT>
<Script language = "JavaScript" type = "text/JavaScript">
Navbaritemcreate ('navbar', 0 );
</SCRIPT>
</Body>
</Html>