js一个容易的成品页标签
日期：2014-05-16 浏览次数：20286 次
js一个简单的成品页标签.
一个简单的成品多页标签,拿来即可使用.
虽然很简单,但是很实用的东东.
可能会需要应用一个Frame框架,灵活运用吧.
一个简单的成品多页标签,拿来即可使用.
<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框架,灵活运用吧.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
