html,body{margin:0text-align:centerover-flow:hiddenheight:100%width:100%}
ul{list-style-type:nonemargin:0px}
.ctt{height:autoclear:bothborder:1px solid #064ca1border-top:0text-align:left}
.w936{margin:2px 0clear:bothwidth:936px/*整个滑动门的宽度*/}
/*tab切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px}
.tb_ li{float:leftmargin-right:2pxheight: 24pxline-height:1.9width: 94pxcursor:pointer}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block}
.undis{display:none}
-->
</style>
<script type="text/javascript" language="javascript">
//<!cdata[
function g(o){return document.getElementbyId(o)}
function HoverLi(n){
//如果有N个标签，就将i<=N
for(var i=1i<=3i++){g('tb_'+i).className='normaltab'g('tbc_0'+i).className='undis'}g('tbc_0'+n).className='dis'g('tb_'+n).className='hovertab'
}
//如果要做成点击后再转到请将<li>中的onmouseover改成onclick
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouseOver="x:HoverLi(1)">
标题1</li>
<li id="tb_2" class="normaltab" onMouseOver="i:HoverLi(2)">
标题2</li>
<li id="tb_3" class="normaltab" onMouseOver="a:HoverLi(3)">
标题3</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>
</div>
</div>
滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。
应该是编码不对。最好不要用记事本直接写，应该用notepad或者开发工具写代码，不仅不会出现问题，而且有代码提示很方便。用记事本保存的时候，默认是ansi编码，需要手动选择utf8编码格式，才能保证打开不会乱码。在onmouseover事件调用js函数，函数内容为新添加一个div，在div中显示图片,把z-index设小点，使其显示在最前面鼠标滑过时在前面新添加一张图片，把原来的图片移除
