js一个容易的成品页标签 _JavaScript

js一个简单的成品页标签.
一个简单的成品多页标签,拿来即可使用.

<style type="text/css">
*{padding:0px;margin:0px;}
body{ width:98%;padding:0px;margin:0px;}
UL{list-style-type:none; margin:0px;font-size:12px;height:30px;padding:0px;}
.w936{margin:auto;width:100%;height:30px;}
.tb_{background-repeat: repeat-x;width:auto;height:40px;width:100%;}
.tb_ ul{height:30px;width:100%;}
.tb_ li{float:left;height: 30px;line-height:30px;width: 130px;cursor:pointer; text-align:center;}
.tb_ li a{font-family:"宋体"; font-size:12px; text-align:left;}
.normaltab   { background:url(../images/cz_normal.gif); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab    { background:url(../images/cz_active.gif); background-repeat: no-repeat; color:#000; font-weight:bold }
.navline{width:100%;height:5px; font-size:0px; background-color:#91d0fb;}

</style>
<script type="text/javascript"> 
function g(o){return document.getElementById(o);}
function HoverLi(n){

for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';}
	g('tb_'+n).className='hovertab';
	if(n==1){
		parent.bottomFrame2.location.href="http://www.baidu.com";
	}else if(n==2){
		parent.bottomFrame2.location.href="http://www.google.com.hk";
	}else if(n==3){
		parent.bottomFrame2.location.href="http://yuelangyc.iteye.com";
	}
}
</script>
</head>
<body>	
	<div class="w936">
		<div id="tb_" class="tb_">
			<ul>
			<li id="tb_1" class="hovertab"  onClick="x:HoverLi(1);">百度</li>
			<li id="tb_2" class="normaltab" onClick="i:HoverLi(2);">google</li>
			<li id="tb_3" class="normaltab" onClick="a:HoverLi(3);">博客</li>
			<li id="tb_4" class="normaltab" onClick="a:HoverLi(4);" disabled=true>不可用</li>
			</ul>
                   <div class="navline"></div></div>
		</div>
	</div>
</body>
</html>

虽然很简单,但是很实用的东东.
可能会需要应用一个Frame框架,灵活运用吧.