找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1721|回复: 5

[求助] 一个TAB滑动切换,做了一半就不会了

[复制链接]
发表于 2013-2-16 17:54:07 | 显示全部楼层 |阅读模式
本帖最后由 sixw 于 2013-2-16 17:55 编辑

有人可以帮忙完整一下吗?谢谢了

要鼠标滑动就切换TAB的效果

 提示:您可以先修改部分代码再运行

发表于 2013-2-16 19:09:13 | 显示全部楼层
八种经典效果的Tab选项卡。

ks-switch.rar

18.65 KB, 下载次数: 236

回复 支持 反对

使用道具 举报

发表于 2013-2-17 08:06:56 | 显示全部楼层
楼上的你发的东西怎么还要密码呀???
回复 支持 反对

使用道具 举报

发表于 2013-2-17 15:50:04 | 显示全部楼层
这个用网上改的应该是你要的效果了

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2013-2-17 15:52:12 | 显示全部楼层
二楼的附件有密码,我去网上找了一个同样名字的TAB滑动附件,应该是一样的,里面的几个例子也可以用。

ks-switch[20090428].rar

18.87 KB, 下载次数: 259

回复 支持 反对

使用道具 举报

发表于 2013-2-18 10:17:48 | 显示全部楼层
  1. <html>
  2. <head>

  3. <title>        tab</title>

  4.        
  5. <style charset="utf-8" type="text/css">

  6. #tab_menu_center {
  7.     height: 28px;
  8.     margin: 0 auto;
  9.     position: relative;
  10.     width: 972px;
  11. }

  12. ul#nav {
  13.     color: #FFFFFF;
  14.     display: block;
  15.     height: 22px;
  16.     list-style: none outside none;
  17.     margin: 0;
  18.     padding: 0 0 0 140px;
  19.     text-decoration: none;
  20. }
  21. ul#nav li {
  22.   
  23.     color: #FFFFFF;
  24.     float: left;
  25.     font-size: 15px;
  26.     height: 22px;
  27.     line-height: 18px;
  28.     margin: 0;
  29.     padding-top: 6px;
  30.     text-align: center;
  31.     text-decoration: none;
  32.     width: 150px;
  33. }

  34. ul#nav li.on a{
  35.     color:red;
  36. }
  37. ul#nav li a{ display:block;}

  38. #content_center {
  39.     margin: 0 auto;
  40.     position: relative;
  41.     width: 972px;
  42. }
  43. #content_1 {
  44.     height: 580px;
  45.     padding: 1px 24px 12px;
  46.     position: relative;
  47.     width: 684px;
  48. }
  49. #content_2 {
  50.     height: 580px;
  51.     padding: 1px 24px 12px;
  52.     position: relative;
  53.     width: 684px;
  54. }
  55. #content_3 {
  56.     height: 580px;
  57.     padding: 1px 24px 12px;
  58.     position: relative;
  59.     width: 684px;
  60. }
  61. .content{display:none;}
  62. .show{ display:block;}

  63. </style>       
  64.        
  65. </head>



  66.        
  67. <body style="">

  68. <div id="tab_menu_warp"  style=" display:block;">
  69.          
  70.     <div id="tab_menu_center">
  71.              <ul id="nav">
  72.                                 <li onmouseover="swapdiv(1);" id="nav1" class="nav on"><a href=""  >1111</a></li>
  73.                                 <li onmouseover="swapdiv(2);" class="nav" id="nav2"><a href="" >222</a></li>
  74.                                 <li onmouseover="swapdiv(3);" class="nav" id="nav3"><a href="" >3333</a></li>
  75.                            </ul>
  76.         </div>
  77. </div>
  78.   


  79. <div id="content_center">         
  80.         <div id="content_1" class="div_show show">
  81.                      <div class="fg">1111111111111111</div>   
  82.         </div>

  83.        <div id="content_2" class=" content ">
  84.                     <div class="zr_zs">22222222222222222222</div>                  
  85.            </div>

  86.         <div id="content_3" class=" content">
  87.              <div id="right"> 333333333333333333333333333          </div>
  88.                 </div>           
  89. </div>
  90.    
  91.   


  92.   



  93. <script type="text/javascript" src="http://shouji.baidu.com/resource/js/jquery-1.6.2.min.js"></script>
  94. <script type="text/javascript">
  95. function $(id){
  96.         return document.getElementById(id);
  97. }
  98. function swapdiv(newTab) {
  99.         for(var i=1; i<4; i++){
  100.                 $('nav'+i).className = '';
  101.                 $('content_'+i).className = 'content';
  102.         }
  103.         $('nav'+newTab).className = 'on';
  104.         $('content_'+newTab).className = 'show';
  105. }
  106. </script>


  107.       




  108.    
  109.         


  110. </body></html>
复制代码
  
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )

GMT+8, 2021-4-13 12:19 , Processed in 0.064797 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表