zoukankan      html  css  js  c++  java
  • jQuery插件之选择卡切换效果

    写了一款jQuery插件,选择卡切换效果:

        /* 
            <div class="tab-container"> 
            <ul class="tab-title"> 
                <li class="current"></li> 
                <li></li> 
                <li></li> 
                <li></li> 
            </ul> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            <div class="tab-content"></div> 
            </div> 
        */  
          
        (function($){  
          
            $.fn.tab = function(options){  
                var ops = $.fn.extend({  
                    //当前样式  
                    currentClass : "current"  
                  
                },options);  
                return this.each(function(){  
                      
                    var $this = $(this);  
                    var $li = $this.find("ul > li");  
                    var $index = $this.index();  
                      
                    $li.click(function(){  
                        var _$this = $(this);  
                        var n =_$this.index();  
                        //移除样式  
                        $li.removeClass(ops.currentClass);  
                        //添加当前样式  
                        _$this.addClass(ops.currentClass);  
                        //隐藏所有  
                        $this.find(".tab-content").hide();    
                        //显示当前  
                        $this.find(".tab-content:eq("+n+")").show();      
                    });  
          
                });  
              
            }  
          
          
        })(jQuery);  
    
        .tab-container {}  
        .tab-container .current{}  
        .tab-container .tab-content{display:none}  
    
  • 相关阅读:
    Git使用教程与基本原理和Sourcetree基本使用探微
    微博开发笔记上(未完待续)
    Swift入门
    刀哥之指纹识别biometrics
    iOS面试关于http知识点basic-01-http
    SDWebImageInfo
    runloop
    NSOperation类
    java多线程
    java集合类(二)
  • 原文地址:https://www.cnblogs.com/kingwell/p/2707170.html
Copyright © 2011-2022 走看看