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}  

 

posted @ 2012-09-28 14:41  kingwell  阅读(581)  评论(0编辑  收藏  举报