手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

jQuery:TAB切换

首页 > Javascript >

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

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

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery -- this 和 $(this) 的区别 (浏览: 86398, 评论: 3)
[转载]超强大的jquery formValidator (浏览: 51793, 评论: 3)
jQuery插件---获取URL参数 (浏览: 47070, 评论: 1)
jQuery的html()等方法介绍 (浏览: 46503, 评论: 1)
取得html中的comment的内容 (浏览: 43320, 评论: 2)
jQuery的bind函数 (浏览: 41615, 评论: 1)
将Yiiframework与JQuery easyUI整合使用 (浏览: 39054, 评论: 2)
jQuery一些插件的链接[转] (浏览: 38623, 评论: 2)
取消radio的选中状态 (浏览: 37781, 评论: 1)
JQuery学习第一天 (浏览: 36328, 评论: 3)

发表评论

评论内容 (必填):