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

更新时间：2007年05月22日 00:00:00 作者：

如果是感应触发.就选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 class="nTab">          <div class="TabTitle">       <ul id="myTab0">         <li class="active" onmouseover="nTabs(this,0);">全部</li>         <li class="normal" onmouseover="nTabs(this,1);">日志</li>         <li class="normal" onmouseover="nTabs(this,2);">咨询</li>         <li class="normal" onmouseover="nTabs(this,3);">相册</li>         <li class="normal" onmouseover="nTabs(this,4);">商城</li>         <li class="normal" onmouseover="nTabs(this,5);">社区</li>       </ul>     </div>          <div class="TabContent">       <div id="myTab0_Content0"> 000 </div>       <div id="myTab0_Content1" class="none">111</div>       <div id="myTab0_Content2" class="none">222</div>       <div id="myTab0_Content3" class="none">333</div>       <div id="myTab0_Content4" class="none">444</div>       <div id="myTab0_Content5" class="none">555</div>     </div>   </div>         <div class="nTab" style=width:288px>          <div class="TabTitle">       <ul id="myTab1">         <li class="active" onclick="nTabs(this,0);">aaa</li>         <li class="normal" onclick="nTabs(this,1);">bbb</li>         <li class="normal" onclick="nTabs(this,2);">ccc</li>         <li class="normal" onclick="nTabs(this,3);">单击</li>       </ul>     </div>          <div class="TabContent">       <div id="myTab1_Content0"> 000 </div>       <div id="myTab1_Content1" class="none"> 111 </div>       <div id="myTab1_Content2" class="none"> 222 </div>       <div id="myTab1_Content3" class="none"> 333 </div>     </div>   </div>    </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

javascript+css 新闻显示tab 选项卡效果
跟新浪的比较像啊，tab切换效果，门户类网站用过的，大家可以看看。
2009-04-04
js实现的XP风格的右键菜单
js实现的XP风格的右键菜单...
2007-03-03
又一个漂亮的导航栏的下拉菜单
这篇文章主要介绍了又一个漂亮的导航栏的下拉菜单,需要的朋友可以参考下
2007-06-06
JavaScript CSS菜单功能改进版
在上一篇《JavaScript css 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
2008-12-12
用js实现的比较经典实用的触发型导航菜单
用js实现的比较经典实用的触发型导航菜单...
2007-03-03
js 浮动层菜单收藏
最近做了一个通用的浮动层菜单替代函数，可以方便地把传统的 SELECT 单选菜单替换成时尚的浮动层菜单。
2009-01-01
通用的二级菜单代码(css+javascript)
前几天做网站使用到二级菜单，想也没想就在网上当了几个，不过大多都不太满意，只有《CSS二级菜单》看上去似乎好一点，就使用了那个。
2009-07-07
提取自百度有啊的css圆角效果
css圆角效果大家注意下图片，其实就是利用图片+css实现
2009-03-03
javascript实现的树型下拉框改进版
发现上一个版本，如果数据顺序颠倒就会出现问题，现在加以改进，
2008-09-09
改写一个简单的菜单弹性大小
看到一个简单的菜单样式，由于是作者比较早的作品，视觉效果不太好，有点突兀自己做了一点小修改，模仿icon动画的效果(区别的关键点是getStyle取得当前计算样式这个函数)
2010-12-12