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

2019-11-21 02:04:23

字體：大中小

來源：轉載

供稿：網友

如果是感應觸發.就選onmouseover
如果是點擊觸發.就選onclick [把它們兩互相替換,就可隨時變為感應或點擊了]

而如果想在一個頁面上有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> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) {   if (i == Num)   {    thisObj.className = "active";        document.getElementById(tabObj+"_Content"+i).style.display = "block";   }else{    tabList[i].className = "normal";     document.getElementById(tabObj+"_Content"+i).style.display = "none";   } }  } </script> </head> <body>   <div align="center" style="padding-left:25px;">    <div   id="iwvjtn8m0"   class="nTab">          <div   id="iwvjtn8m0"   class="TabTitle">       <ul id="myTab0">         <li id="iwvjtn8m0"    class="active" onmouseover="nTabs(this,0);">全部</li>         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,1);">日志</li>         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,2);">咨詢</li>         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,3);">相冊</li>         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,4);">商城</li>         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,5);">社區</li>       </ul>     </div>          <div   id="iwvjtn8m0"   class="TabContent">       <div   class="iwvjtn8m0"   id="myTab0_Content0"> 000 </div>       <div   class="iwvjtn8m0"   id="myTab0_Content1" class="none">111</div>       <div   class="iwvjtn8m0"   id="myTab0_Content2" class="none">222</div>       <div   class="iwvjtn8m0"   id="myTab0_Content3" class="none">333</div>       <div   class="iwvjtn8m0"   id="myTab0_Content4" class="none">444</div>       <div   class="iwvjtn8m0"   id="myTab0_Content5" class="none">555</div>     </div>   </div>         <div   id="iwvjtn8m0"   class="nTab" style=width:288px>          <div   id="iwvjtn8m0"   class="TabTitle">       <ul id="myTab1">         <li id="iwvjtn8m0"    class="active" onclick="nTabs(this,0);">aaa</li>         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,1);">bbb</li>         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,2);">ccc</li>         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,3);">單擊</li>       </ul>     </div>          <div   id="iwvjtn8m0"   class="TabContent">       <div   class="iwvjtn8m0"   id="myTab1_Content0"> 000 </div>       <div   class="iwvjtn8m0"   id="myTab1_Content1" class="none"> 111 </div>       <div   class="iwvjtn8m0"   id="myTab1_Content2" class="none"> 222 </div>       <div   class="iwvjtn8m0"   id="myTab1_Content3" class="none"> 333 </div>     </div>   </div>    </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：無間斷滾動的新聞文章列表，兼容IE、Firefox和Opera，符合W3C標準。可作Marquee

下一篇：JavaScript網頁制作特殊效果用隨機數