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