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

2024-09-06 12:42:20

字體：大中小

來源：轉載

供稿：網友

如果是感應觸發.就選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>  </head> <body>                        <ul id="myTab0">         <li id="mdtfrdi"    class="active" onmouseover="nTabs(this,0);">全部         <li id="asvaolp"    class="normal" onmouseover="nTabs(this,1);">日志         <li id="vyoqgnk"    class="normal" onmouseover="nTabs(this,2);">咨詢         <li id="acyjbhr"    class="normal" onmouseover="nTabs(this,3);">相冊         <li id="ddbqsjo"    class="normal" onmouseover="nTabs(this,4);">商城         <li id="znhyoxc"    class="normal" onmouseover="nTabs(this,5);">社區                              000        111       222       333       444       555                                  <ul id="myTab1">         <li id="sdlsbgo"    class="active" onclick="nTabs(this,0);">aaa         <li id="kzabycd"    class="normal" onclick="nTabs(this,1);">bbb         <li id="apqgoai"    class="normal" onclick="nTabs(this,2);">ccc         <li id="iwuhbok"    class="normal" onclick="nTabs(this,3);">單擊                              000         111         222         333              </body> </html>

上一篇：attachEvent的使用方法與傳遞參數[IE|firefox]

下一篇：更正確的asp冒泡排序