像QQ一样的，好用的Navbar
<!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;" >
策略基本信息
</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;" >
策略基本信息
</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;" >
策略基本信息
</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 != '100%')
{
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;
}
//入回函数
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>
<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;" >
策略基本信息
</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;" >
策略基本信息
</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;" >
策略基本信息
</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 != '100%')
{
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;
}
//入回函数
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>
