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