jquery TAB切换小插件

//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({});

 

转载于:https://www.cnblogs.com/simao/p/7600016.html