财富经分享【最实用滑动门代码】（要求加精）

效果见    http://www.cfj88.cn财富经创业网   中间文章版3的滑动效果，类似于网易，但比网易的代码更简单，使用更方便

【JS】码：
<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.className = "normal";
   document.getElementById(tabObj+"_Content"+i).style.display = "none";
  }
}
}
</script>
【CSS码】
/** 测试滑动门 **/
.nTab1{
float: left;
width: 274px;
border:1px #ccc solid;
margin: 0 auto;
background:#FFFFFF;
background-position:left;
background-repeat:repeat-y;
margin-bottom:4px;
}
.nTab1 .TabTitle1{
clear: both;
height: 26px;
overflow: hidden;
}
.nTab1 .TabTitle1 ul{
border:0;
margin:0;
padding:0;
}
.nTab1 .TabTitle1 li{
float: left;
width: 90px;
cursor: pointer;
padding-top: 5px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 5px;
font-family:宋体;
    font-weight:100;font-size:13px;color: #261CDC;font-weight: bold;
}
.nTab1 .TabTitle1 .active{background: url(显示标题块的图片地址);border-right:1px #ccc solid;border-bottom:2px #cc0000 solid;text-align:center;text-color:fff;}
.nTab1 .TabTitle1 .normal{background: url(不活动的图片地址);border-right:1px #fff solid;text-align:center;}
.nTab1 .TabContent{
width:auto;background: url(/wztitbg.gif);no-repeat 0px 1px;
margin: 0px auto;
padding:1px 0 0 2px;
border-top:1px #CCC solid;
}
.nTab1 .TabContent li{
font-family:宋体;font-size:15px;color: #261CDC;
}
.none {display:none;}

【网站代码】
<!--卡1开始-->
<div class="nTab1">
    <!-- 标题开始 -->
    <div class="TabTitle1">
      <ul id="myTab01">
        <li class="active" >财富名人</li>
        <li class="normal" >创业故事</li>
      
     </ul>
    </div>
    <!-- 内容开始 -->
    <div class="TabContent">
      <div id="myTab01_Content0"> {你的调用代码}  </div>
      <div id="myTab01_Content1" class="none">{你的调用代码} </div>
                </div>
  </div>
<!-- 选项卡1结束 -->
-----------------------------------------------------------------------

   如在使用过程中有不明白的地方，请在下面留下问题，我定期来补充此贴，希望能对大家让自己网站更完美提供帮助:)  要重复使用 修改ID号就可以了ul id="myTab01 02改后面这个数字

  使用了的在下面贴出自己的网站啊 大家互相踩踩

[ 本帖最后由 shangjicn2 于 2007-11-1 11:50 编辑 ]

怎么没人？好贴大家顶啊！

好东西 收藏了

顶一下，效果很好

真的不错

大家觉得好的头顶一下

不错，支持！
www.jrj.com的滑动门效果也不错，楼主能搞出来吗？

这个效果还可以啊

版主加精啊 这么好的东西大家以后找起来也方便 我找了很久啊