一段非常好的滑動(dòng)門[可感應(yīng)觸發(fā)或點(diǎn)擊觸發(fā)]兼容IE7 IE6 FireFox

2024-09-06 12:42:20

字體：大中小

供稿：網(wǎng)友

如果是感應(yīng)觸發(fā).就選onmouseover
如果是點(diǎn)擊觸發(fā).就選onclick [把它們兩互相替換,就可隨時(shí)變?yōu)楦袘?yīng)或點(diǎn)擊了]

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

保留自己用

<!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>我的滑動(dòng)門</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="iwvjtn8m0"    class="active" onmouseover="nTabs(this,0);">全部         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,1);">日志         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,2);">咨詢         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,3);">相冊         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,4);">商城         <li id="iwvjtn8m0"    class="normal" onmouseover="nTabs(this,5);">社區(qū)                              000        111       222       333       444       555                                  <ul id="myTab1">         <li id="iwvjtn8m0"    class="active" onclick="nTabs(this,0);">aaa         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,1);">bbb         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,2);">ccc         <li id="iwvjtn8m0"    class="normal" onclick="nTabs(this,3);">單擊                              000         111         222         333              </body> </html>

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

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