滑动门 js css 

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>▒ 恋婷滑动门技术</title>

<style media="screen" type="text/css">

<!--

*{font-size:14px; padding:0; margin:0;}

html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}

UL{list-style-type:none; margin:0px;}



/* 标准盒模型 */

.gpttl{height:18px;}

.gpctt{height:auto;padding:6px;clear:both;text-align:left;}

.w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}



/* TAB 切换效果 */

.gptb_{ height:32px; background-color:#eee;}

.gptb_ ul{height:32px;}

.gptb_ li{float:left; height:30px;line-height:30px; width:94px; cursor:pointer;}



/* 用于控制显示与隐藏的css类 */

.gpnormaltab   {background-repeat:no-repeat; color:#1F3A87 ;}

.gphovertab    {color:#1F3A87; font-weight:bold; border-bottom:2px solid #669acc; }

.dis{display:block;}

.undis{display:none;}

-->

</style>

<script type="text/javascript" language="javascript">

function g(o){return document.getElementById(o);}

function HoverLi(n){

for(var i=1;i<=3;i++){g('gptb_'+i).className='normaltab';g('gptbc_0'+i).className='undis';}g('gptbc_0'+n).className='dis';g('gptb_'+n).className='gphovertab';}

</script>

</head>

<body>



<div class="w936">

	<div id="gptb_" class="gptb_">

			<ul>

				<li id="gptb_1" class="gphovertab" onmouseover="x:HoverLi(1);">

				公棚资讯</li>

				<li id="gptb_2" class="gpnormaltab" onmouseover="i:HoverLi(2);">

				协会资讯</li>

				<li id="gptb_3" class="gpnormaltab" onmouseover="a:HoverLi(3);">

				俱乐部资讯</li>

			</ul>

	</div>

	<div class="gpctt">

		<div class="dis" id="gptbc_01">流行音乐 的内容</div>

		<div class="undis" id="gptbc_02">美女写真 的内容</div>

		<div class="undis" id="gptbc_03">平面设计 的内容</div>

	</div>

</div>

</body>

</html>

 

posted @ 2012-10-18 14:57  南潇湘  阅读(224)  评论(0)    收藏  举报