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}