手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:tab

jQuery:TAB切换

没有什么特别的东西。主要就是有了一个延迟,但效果不是特别好。。将就点了。

JavaScript代码
  1. $.fn.gTab = function( opts ){  
  2.     var options = {  
  3.         'timer':0,  //0.005秒  
  4.         'hover':'',  
  5.         'target':'',  
  6.         'autoswitch':false,  
  7.         'addClass':'',  
  8.         'removeClass':''  
  9.     };  
  10.     var self = $(this);  
  11.     opts = $.extend(true, {},options,opts || {});    
  12.     if(!opts.target){  
  13.         alert('对不起,请设置目标对象');  
  14.         return ;  
  15.     }  
  16.     if(!opts.hover){  
  17.         opts.hover = self;  
  18.     }  
  19.     var hoverIntervalFunc = function(index){  
  20.         return setInterval(function(){  
  21.             $(opts.target+':not(eq('+index+'))').hide();  
  22.             $(opts.hover+':not(eq('+index+'))').removeClass(opts.addClass).addClass(opts.removeClass);  
  23.             $(opts.target+':eq('+index+')').show();  
  24.             $(opts.hover+':eq('+index+')').removeClass(opts.removeClass).addClass(opts.addClass);  
  25.         },opts.timer);  
  26.     }  
  27.       
  28.     $(this).hover(  
  29.         function(){  
  30.             var index = self.index(this);  
  31.             cId = hoverIntervalFunc(index);  
  32.         },  
  33.         function(){  
  34.             clearInterval(cId);  
  35.         }  
  36.     )                 
  37. }  
花了半小时写的。所以效果一些都没有特别的考虑。只考虑实现就完事了。。。象很多都是用的:eq和:not(:eq),事实上siblings()已经实现这个功能,但当时写的时候没翻到这个函数,就直接用:not(:eq)来解决了。

Tags: jquery, tab