一段非常好的滑動門[可感應觸發(fā)或點擊觸發(fā)]兼容IE7 IE6 FireFox Opera

更新時間：2007年05月22日 00:00:00 作者：

如果是感應觸發(fā).就選onmouseover
如果是點擊觸發(fā).就選onclick [把它們兩互相替換,就可隨時變?yōu)楦袘螯c擊了]

而如果想在一個頁面上有N個滑動門
就復制一套...將myTab0改成myTab1 myTab2 myTab3 等等等..都可以..或者換成你自己喜歡的名字...當然myTab0_Content0這個亦是要隨著變動!

保留自己用

<!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=gb2312" /> <title>我的滑動門</title> <style type="text/css"> body{ color: #000; font-family: "宋體", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 960px; margin: 0 auto; border-bottom:1px #AACCEE solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 22px; overflow: hidden; } .nTab .TabTitle ul{ border:0; margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 70px; cursor: pointer; padding-top: 4px; padding-right: 0px; padding-left: 0px; padding-bottom: 2px; list-style-type: none; } .nTab .TabTitle .active{background:#fff;border-left:1px #AACCEE solid;border-top:1px #AACCEE solid;border-right:1px #AACCEE solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #AACCEE solid;border-left:1px #AACCEE solid; } .none {display:none;} </style>  </head> <body>   <div align="center" style="padding-left:25px;">    <div   id="vvxyksv9kd"   class="nTab">          <div   id="vvxyksv9kd"   class="TabTitle">       <ul id="myTab0">         <li id="vvxyksv9kd"    class="active" onmouseover="nTabs(this,0);">全部</li>         <li id="vvxyksv9kd"    class="normal" onmouseover="nTabs(this,1);">日志</li>         <li id="vvxyksv9kd"    class="normal" onmouseover="nTabs(this,2);">咨詢</li>         <li id="vvxyksv9kd"    class="normal" onmouseover="nTabs(this,3);">相冊</li>         <li id="vvxyksv9kd"    class="normal" onmouseover="nTabs(this,4);">商城</li>         <li id="vvxyksv9kd"    class="normal" onmouseover="nTabs(this,5);">社區(qū)</li>       </ul>     </div>          <div   id="vvxyksv9kd"   class="TabContent">       <div   class="vvxyksv9kd"   id="myTab0_Content0"> 000 </div>       <div   class="vvxyksv9kd"   id="myTab0_Content1" class="none">111</div>       <div   class="vvxyksv9kd"   id="myTab0_Content2" class="none">222</div>       <div   class="vvxyksv9kd"   id="myTab0_Content3" class="none">333</div>       <div   class="vvxyksv9kd"   id="myTab0_Content4" class="none">444</div>       <div   class="vvxyksv9kd"   id="myTab0_Content5" class="none">555</div>     </div>   </div>         <div   id="vvxyksv9kd"   class="nTab" style=width:288px>          <div   id="vvxyksv9kd"   class="TabTitle">       <ul id="myTab1">         <li id="vvxyksv9kd"    class="active" onclick="nTabs(this,0);">aaa</li>         <li id="vvxyksv9kd"    class="normal" onclick="nTabs(this,1);">bbb</li>         <li id="vvxyksv9kd"    class="normal" onclick="nTabs(this,2);">ccc</li>         <li id="vvxyksv9kd"    class="normal" onclick="nTabs(this,3);">單擊</li>       </ul>     </div>          <div   id="vvxyksv9kd"   class="TabContent">       <div   class="vvxyksv9kd"   id="myTab1_Content0"> 000 </div>       <div   class="vvxyksv9kd"   id="myTab1_Content1" class="none"> 111 </div>       <div   class="vvxyksv9kd"   id="myTab1_Content2" class="none"> 222 </div>       <div   class="vvxyksv9kd"   id="myTab1_Content3" class="none"> 333 </div>     </div>   </div>    </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]