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

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

而如果想在一个页面上有n个滑动门
就复制一套...将mytab0改成mytab1  mytab2  mytab3    等等等..都可以..或者换成你自己喜欢的名字...当然mytab0_content0这个亦是要随着变动!

保留自己用
</p> <p><title>我的滑动门</title> </p> <p>body{<br /> color: #000;<br /> font-family: "宋体", arial;<br /> font-size: 12px;<br /> background: #fff;<br /> text-align: center;<br /> margin: 0;<br /> }<br /> .ntab{<br /> float: left;<br /> width: 960px;<br /> margin: 0 auto;<br /> border-bottom:1px #aaccee solid;<br /> background:#d5d5d5;<br /> background-position:left;<br /> background-repeat:repeat-y;<br /> margin-bottom:2px;<br /> }<br /> .ntab .tabtitle{<br /> clear: both;<br /> height: 22px;<br /> overflow: hidden;<br /> }<br /> .ntab .tabtitle ul{<br /> border:0;<br /> margin:0;<br /> padding:0;<br /> }<br /> .ntab .tabtitle li{<br /> float: left;<br /> width: 70px;<br /> cursor: pointer;<br /> padding-top: 4px;<br /> padding-right: 0px;<br /> padding-left: 0px;<br /> padding-bottom: 2px;<br /> list-style-type: none;<br /> }<br /> .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;}<br /> .ntab .tabtitle .normal{background:#ebf3fb;border:1px #aaccee solid;}<br /> .ntab .tabcontent{<br /> width:auto;background:#fff;<br /> margin: 0px auto;<br /> padding:10px 0 0 0;<br /> border-right:1px #aaccee solid;border-left:1px #aaccee solid;<br /> }<br /> .none {display:none;} </p> <p>function ntabs(thisobj,num){<br /> if(thisobj.classname == "active")return;<br /> var tabobj = thisobj.parentnode.id;<br /> var tablist = document.getelementbyid(tabobj).getelementsbytagname("li");<br /> for(i=0; i <tablist.length; i++)<br /> {<br /> if (i == num)<br /> {<br /> thisobj.classname = "active";<br /> document.getelementbyid(tabobj+"_content"+i).style.display = "block";<br /> }else{<br /> tablist[i].classname = "normal";<br /> document.getelementbyid(tabobj+"_content"+i).style.display = "none";<br /> }<br /> }<br /> } </p> <p><!-- 选项卡0开始 --> </p> <p> <!-- 标题开始 --> </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> <!-- 内容开始 --> </p> <p> 000<br /> 111<br /> 222<br /> 333<br /> 444<br /> 555 </p> <p> <!-- 选项卡0结束 --><br /> <!-- 选项卡1开始 --> </p> <p> <!-- 标题开始 --> </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> <!-- 内容开始 --> </p> <p> 000<br /> 111<br /> 222<br /> 333 </p> <p> <!-- 选项卡1结束 --> </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]