zoukankan      html  css  js  c++  java
  • 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({});

  • 相关阅读:
    算法技巧之打表
    Python_爬虫_爬取网络图片信息01
    python_爬虫_爬取京东商品信息
    Python——turtle库学习
    Python学习笔记——函数
    131219流水账
    121219流水账
    081219~111219流水账
    071219流水账
    061219流水账
  • 原文地址:https://www.cnblogs.com/simao/p/7600016.html
Copyright © 2011-2022 走看看