用CSS做滑動門

由於BAIDU不支援原始碼，效果請看我的另一個BLOG：

http://www.blog.edu.cn/user4/dpxdqx/archives/2007/1867755.shtml

 

下面是源碼：

<STYLE type=text/css media=screen>
<!--
*{font-size:12px;}
UL{list-style-type:none; margin:0px;}
/* 標準盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both}
.w936{width:100%;margin:2px 0;clear:both;border:1px solid skyblue}

/* TAB 轉場效果 */
.tb_{background-color: #E6F2FF; background-image: url('http://www.dc18.com/images/barbg_tab.gif'); background-repeat: repeat-x;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;padding-top: 6px;width: 94px;cursor:pointer;}
.normaltab    { background-image:url('http://www.dc18.com/images/normal_tab.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab     { background-image: url('http://www.dc18.com/images/hover_tab.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.dis{display:block;}
.undis{display:none;}
-->
</STYLE>

<SCRIPT language=javascript type=text/javascript>
<!--
function g(o){return document.getElementById(o);}
function HoverLi(n){
//如果有N個標籤,就將i<=N;
//本功能非常OK,相容IE7,FF,IE6;
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//-->
</SCRIPT>

<DIV class="w936">
<DIV class=tb_ id=tb_>
<UL>
<LI class="hovertab" id=tb_1 onmouseover=xgz:HoverLi(1);>彥磊的百度部落格 </LI>
<LI class="normaltab" id=tb_2 onmouseover=xgz:HoverLi(2);>彥磊的教育部落格 </LI>
<LI class=normaltab id=tb_3 onmouseover=xgz:HoverLi(3);>歡迎到這裡 </LI>
<LI class="normaltab" id=tb_4 onmouseover=xgz:HoverLi(4);>欄目導航 </LI>
</UL></DIV>
<DIV class="ctt">
<DIV class=dis id=tbc_01>內容1</DIV>
<DIV class="undis" id=tbc_02>內容2</DIV>
<DIV class="undis" id=tbc_03>內容3</DIV>
<DIV class="undis" id=tbc_04>內容4</DIV>