手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表2010年03月4日的文章

jQuery写的tab切换

花了半小时左右写了这个小东西。没有封装成插件。因为我觉得性能不好。主要就是想试一下$('xxx').data()这个方法。
在页面不大的时候,其实真的可以用这个方法来缓存ajax的数据。

JavaScript代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script src="http://localhost/jquery.js"></script>  
  10.   <style>  
  11.     .mytab{border:1px solid #888;cursor:pointer;}  
  12.     .showdiv{border:1px solid #888;cursor:pointer;}  
  13.   </style>  
  14.  </head>  
  15.   
  16.  <body>  
  17.     <div>  
  18.         <span class="mytab">Tab1</span>  
  19.         <span class="mytab">Tab2</span>  
  20.     </div>  
  21.     <div id='tab-1' style="display:none" rel="http://localhost/test.php" class="showdiv">  
  22.     </div>  
  23.     <div id='tab-2' style="display:none" class="showdiv">  
  24.         ddssasdflkjasdflkjalsdkfj  
  25.     </div>  
  26.   
  27.     <input type='button' value="click" id='clickid'>  
  28.     <script language="JavaScript">  
  29.     <!--  
  30.         $(document).ready(function(){  
  31.             $('body').append("<div id='testData' />");  
  32.   
  33.             $('.mytab').each(function(i){  
  34.                 $(this).click(function(){  
  35.                     var j = i+1;  
  36.                     var id = 'tab-' + j;  
  37.                     var src = $('#'+id).attr('rel');  
  38.                     if( src ){  
  39.                         if($('testData').data('data_'+id)){  
  40.                             return ;  
  41.                         }else{  
  42.                             $.get( src ,function(data){  
  43.                                 if(data){  
  44.                                     $('testData').data('data_'+id,data);  
  45.                                     $('#'+id).html(data);  
  46.                                 }  
  47.                             });  
  48.                         }  
  49.                     }  
  50.                     var len = $('.mytab').length;  
  51.                     for (var s=1;s<=len ; s++){  
  52.                         s == j ? $('#'+id).show() : $('#tab-'+s).hide();  
  53.                     }  
  54.   
  55.                 });  
  56.             });  
  57.         });  
  58.     //-->  
  59.     </script>  
  60.  </body>  
  61. </html>  

纯实现,无性能无效果。只是可以运行而己
目前我就在tab的切换和Div的显示方面没有想到更好的。。。其实如果显示内容的div不用ID也可以这样写:

 

JavaScript代码
  1. $('.test').hide();  
  2. $('.test').eq(i).show();  

避免了循环

 

随便写写。。。也请随便看看