//tab切换 ;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { //默认参数 btn:'.tab_name',//点击按钮 active:'active',//按钮增加的class content:'.tab_cont',//切换的主题 event:'click',//触发的事件 effect:'show',//效果 backFn:function(){}//回调函数 }; var settings = $.extend({}, defaults, options); var _this=this, btn=_this.find(settings.btn), content=_this.find(settings.content), active=settings.active, index; content.hide(); content.eq(0).show(); btn.on(settings.event,function(){ index=$(this).index(); btn.eq(index).addClass(active).siblings().removeClass(active); if(settings.effect=='fade'){ content.eq(index).siblings(content).hide().end().fadeIn(settings.backFn); }else{ content.eq(index).siblings(content).hide().end().show(0,settings.backFn); } }) }; })(jQuery, window, document);
页面有多个tab切换,写成插件会比较省事,调用:
$('.share_news').tab({});