一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick    [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有N个滑动门
就复制一套...将myTab0改成myTab1  myTab2  myTab3    等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!

保留自己用
<title>我的滑动门</title> 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;} <!-- 选项卡0开始 --> <!-- 标题开始 --> </p> <ul id="myTab0"> <li class="active">全部</li> <li class="normal">日志</li> <li class="normal">咨询</li> <li class="normal">相册</li> <li class="normal">商城</li> <li class="normal">社区</li> </ul> <p><!-- 内容开始 --> 000 111222333444555<!-- 选项卡0结束 --><!-- 选项卡1开始 --> <!-- 标题开始 --> </p> <ul id="myTab1"> <li class="active">aaa</li> <li class="normal">bbb</li> <li class="normal">ccc</li> <li class="normal">单击</li> </ul> <p><!-- 内容开始 --> 000 111 222 333 <!-- 选项卡1结束 -->
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera的详细内容，更多请关注本站其它相关文章！