1.简单实用的滑动门效果，想要改变效果onmouseover 改成 onclick 就好了

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>我的滑动门</title>
  5. <style type="text/css">
  6. body{
  7. color: #000;
  8. font-family: "宋体", arial;
  9. font-size: 12px;
  10. background: #fff;
  11. text-align: center;
  12. margin: 0;
  13. }
  14. .nTab{
  15. float: left;
  16. width: 960px;
  17. margin: 0 auto;
  18. border-bottom:1px #AACCEE solid;
  19. background:#d5d5d5;
  20. background-position:left;
  21. background-repeat:repeat-y;
  22. margin-bottom:2px;
  23. }
  24. .nTab .TabTitle{
  25. clear: both;
  26. height: 22px;
  27. overflow: hidden;
  28. }
  29. .nTab .TabTitle ul{
  30. border:0;
  31. margin:0;
  32. padding:0;
  33. }
  34. .nTab .TabTitle li{
  35. float: left;
  36. width: 70px;
  37. cursor: pointer;
  38. padding-top: 4px;
  39. padding-right: 0px;
  40. padding-left: 0px;
  41. padding-bottom: 2px;
  42. list-style-type: none;
  43. }
  44. .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;}
  45. .nTab .TabTitle .normal{background:#EBF3FB;border:1px #AACCEE solid;}
  46. .nTab .TabContent{
  47. width:auto;background:#fff;
  48. margin: 0px auto;
  49. padding:10px 0 0 0;
  50. border-right:1px #AACCEE solid;border-left:1px #AACCEE solid;
  51. }
  52. .none {display:none;}
  53.  
  54. </style>
  55.  
  56. <script type="text/javascript">
  57. function nTabs(thisObj,Num){
  58. if(thisObj.className == "active")return;
  59. var tabObj = thisObj.parentNode.id;
  60. var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  61. for(i=0; i <tabList.length; i++)
  62. {
  63.   if (i == Num)
  64.   {
  65.    thisObj.className = "active";
  66.       document.getElementById(tabObj+"_Content"+i).style.display = "block";
  67.   }else{
  68.    tabList[i].className = "normal";
  69.    document.getElementById(tabObj+"_Content"+i).style.display = "none";
  70.   }
  71. }
  72. }
  73. </script>
  74.  
  75.  
  76. </head>
  77. <body>
  78. <br />
  79. <br />
  80.  
  81. <div align="center" style="padding-left:25px;">
  82. <!-- 选项卡0开始 -->
  83.   <div class="nTab">
  84.     <!-- 标题开始 -->
  85.     <div class="TabTitle">
  86.       <ul id="myTab0">
  87.         <li class="active" onmouseover="nTabs(this,0);">全部</li>
  88.         <li class="normal" onmouseover="nTabs(this,1);">日志</li>
  89.         <li class="normal" onmouseover="nTabs(this,2);">咨询</li>
  90.         <li class="normal" onmouseover="nTabs(this,3);">相册</li>
  91.         <li class="normal" onmouseover="nTabs(this,4);">商城</li>
  92.         <li class="normal" onmouseover="nTabs(this,5);">社区</li>
  93.       </ul>
  94.     </div>
  95.     <!-- 内容开始 -->
  96.     <div class="TabContent">
  97.       <div id="myTab0_Content0"> 000 </div>
  98.       <div id="myTab0_Content1" class="none">111</div>
  99.       <div id="myTab0_Content2" class="none">222</div>
  100.       <div id="myTab0_Content3" class="none">333</div>
  101.       <div id="myTab0_Content4" class="none">444</div>
  102.       <div id="myTab0_Content5" class="none">555</div>
  103.     </div>
  104.   </div>
  105.   <!-- 选项卡0结束 -->
  106.   <!-- 选项卡1开始 -->
  107.   <div class="nTab" style=width:288px>
  108.     <!-- 标题开始 -->
  109.     <div class="TabTitle">
  110.       <ul id="myTab1">
  111.         <li class="active" onclick="nTabs(this,0);">aaa</li>
  112.         <li class="normal" onclick="nTabs(this,1);">bbb</li>
  113.         <li class="normal" onclick="nTabs(this,2);">ccc</li>
  114.         <li class="normal" onclick="nTabs(this,3);">单击</li>
  115.       </ul>
  116.     </div>
  117.     <!-- 内容开始 -->
  118.     <div class="TabContent">
  119.       <div id="myTab1_Content0"> 000 </div>
  120.       <div id="myTab1_Content1" class="none"> 111 </div>
  121.       <div id="myTab1_Content2" class="none"> 222 </div>
  122.       <div id="myTab1_Content3" class="none"> 333 </div>
  123.     </div>
  124.   </div>
  125.   <!-- 选项卡1结束 -->
  126. </div>
  127.  
  128. </body>
  129. </html>

2. 网易滑动效果！一个js，页面任意滑动数量、任意调用

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>滑动门</title>
  5. <style media="screen" type="text/css">
  6. <!--
  7. *{font-size:12px;}
  8. html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
  9. UL{list-style-type:none; margin:0px;}
  10. .ttl{height:18px;}
  11. .ctt{
  12. height:auto;
  13. padding:6px;
  14. clear:both;
  15. border: 1px solid #CCCCCC;
  16. }
  17. .w936{
  18. width:936px;
  19. clear:both;
  20. height: 120px;
  21. margin-top: 20px;
  22. margin-right: 0;
  23. margin-bottom: 2px;
  24. margin-left: 0;
  25. }
  26. .normaltab   {
  27. color:#1F3A87;
  28. }
  29. .hovertab    {
  30. color:#FF0000;
  31. background-color: #99CC00;
  32. }
  33. .dis{display:block;}
  34. .undis{display:none;}
  35.     .tabs {
  36.       width:100%;
  37.       background:#BBD9EE;
  38.       font-size:93%;
  39.       line-height:normal;
  40.       }
  41.     .tabs ul {
  42. margin:0;
  43. padding:10px 10px 0 50px;
  44. list-style:none;
  45.       }
  46.     .tabs li {
  47. display:inline;
  48. margin:0;
  49. padding:0;
  50. cursor: pointer;
  51.       }
  52.     .tabs a {
  53.       float:left;
  54.       background:url("attachments/month_0705/r200752813247.gif") no-repeat left top;
  55.       margin:0;
  56.       padding:0 0 0 4px;
  57.       text-decoration:none;
  58.       }
  59.     .tabs a span {
  60.       float:left;
  61.       display:block;
  62.       background:url("attachments/month_0705/d200752813252.gif") no-repeat right top;
  63.       padding:5px 15px 4px 6px;
  64.       color:#666;
  65.       }
  66.     .tabs a span {float:none;}
  67.     .tabs a:hover span {
  68.       color:#FF9834;
  69.       }
  70.     .tabs a:hover {
  71.       background-position:0% -42px;
  72.       }
  73.     .tabs a:hover span {
  74.       background-position:100% -42px;
  75.       }
  76. -->
  77. </style>
  78. <script type="text/javascript" language="javascript">
  79. <!--
  80. function g(o){return document.getElementById(o);}
  81. function HoverLi(n)
  82. {
  83. for(var i=1;i<=24;i++){g('tb_'+i);g('tbc_0'+i).className='undis';}
  84. g('tbc_0'+n).className='dis';g('tb_'+n);
  85. }
  86. //-->
  87. </script>
  88. </head>
  89.  
  90. <body>
  91.  
  92. <div class="w936">
  93. <div id="tb_" class="tb_ tabs">
  94. <ul>
  95. <li id="tb_1" onmouseover="HoverLi(1);"><a href="#"><span>栏目导航</span></a></li>
  96. <li id="tb_2" onmouseover="HoverLi(2);"><a href="#"><span>栏目导航</span></a></li>
  97. <li id="tb_3" onmouseover="HoverLi(3);"><a href="#"><span>栏目导航</span></a></li>
  98. <li id="tb_4" onmouseover="HoverLi(4);"><a href="#"><span>栏目导航</span></a></li>
  99. <li id="tb_5" onmouseover="HoverLi(5);"><a href="#"><span>栏目导航</span></a></li>
  100. <li id="tb_6" onmouseover="HoverLi(6);"><a href="#"><span>栏目导航</span></a></li>
  101. <li id="tb_7" onmouseover="HoverLi(7);"><a href="#"><span>栏目导航</span></a></li>
  102. <li id="tb_8" onmouseover="HoverLi(8);"><a href="#"><span>栏目导航</span></a></li>
  103. </ul>
  104. </div>
  105. <div class="ctt">
  106. <div class="dis" id="tbc_01">内容1</div>
  107. <div class="undis" id="tbc_02">内容2</div>
  108. <div class="undis" id="tbc_03">内容3</div>
  109. <div class="undis" id="tbc_04">内容4</div>
  110. <div class="undis" id="tbc_05">内容5</div>
  111. <div class="undis" id="tbc_06">内容6</div>
  112. <div class="undis" id="tbc_07">内容7</div>
  113. <div class="undis" id="tbc_08">内容8</div>
  114. </div>
  115. </div>
  116. <div class="w936">
  117. <div id="tb_" class="tb_  tabs">
  118. <ul>
  119. <li id="tb_9" onmouseover="HoverLi(9);"><a href="#"><span>栏目导航</span></a></li>
  120. <li id="tb_10" onmouseover="HoverLi(10);"><a href="#"><span>栏目导航</span></a></li>
  121. <li id="tb_11" onmouseover="HoverLi(11);"><a href="#"><span>栏目导航</span></a></li>
  122. <li id="tb_12" onmouseover="HoverLi(12);"><a href="#"><span>栏目导航</span></a></li>
  123. <li id="tb_13" onmouseover="HoverLi(13);"><a href="#"><span>栏目导航</span></a></li>
  124. <li id="tb_14" onmouseover="HoverLi(14);"><a href="#"><span>栏目导航</span></a></li>
  125. <li id="tb_15" conmouseover="HoverLi(15);"><a href="#"><span>栏目导航</span></a></li>
  126. <li id="tb_16" onmouseover="HoverLi(16);"><a href="#"><span>栏目导航</span></a></li>
  127. </ul>
  128. </div>
  129. <div class="ctt">
  130. <div class="dis" id="tbc_09">内容9</div>
  131. <div class="undis" id="tbc_010">内容10</div>
  132. <div class="undis" id="tbc_011">内容11</div>
  133. <div class="undis" id="tbc_012">内容12</div>
  134. <div class="undis" id="tbc_013">内容13</div>
  135. <div class="undis" id="tbc_014">内容14</div>
  136. <div class="undis" id="tbc_015">内容15</div>
  137. <div class="undis" id="tbc_016">内容16</div>
  138. </div>
  139. </div>
  140. <div class="w936">
  141. <div id="tb_" class="tb_  tabs">
  142. <ul>
  143. <li id="tb_17" onmouseover="HoverLi(17);"><a href="#"><span>栏目导航</span></a></li>
  144. <li id="tb_18" onmouseover="HoverLi(18);"><a href="#"><span>栏目导航</span></a></li>
  145. <li id="tb_19" onmouseover="HoverLi(19);"><a href="#"><span>栏目导航</span></a></li>
  146. <li id="tb_20" onmouseover="HoverLi(20);"><a href="#"><span>栏目导航</span></a></li>
  147. <li id="tb_21" onmouseover="HoverLi(21);"><a href="#"><span>栏目导航</span></a></li>
  148. <li id="tb_22" onmouseover="HoverLi(22);"><a href="#"><span>栏目导航</span></a></li>
  149. <li id="tb_23" conmouseover="HoverLi(23);"><a href="#"><span>栏目导航</span></a></li>
  150. <li id="tb_24" onmouseover="HoverLi(24);"><a href="#"><span>栏目导航</span></a></li>
  151. </ul>
  152. </div>
  153. <div class="ctt">
  154. <div class="dis" id="tbc_017">内容17</div>
  155. <div class="undis" id="tbc_018">内容18</div>
  156. <div class="undis" id="tbc_019">内容19</div>
  157. <div class="undis" id="tbc_020">内容20</div>
  158. <div class="undis" id="tbc_021">内容21</div>
  159. <div class="undis" id="tbc_022">内容22</div>
  160. <div class="undis" id="tbc_023">内容23</div>
  161. <div class="undis" id="tbc_024">内容24</div>
  162. </div>
  163. </div>
  164. </body>
  165. </html>


无觅相关文章插件，快速提升流量