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}

浙公网安备 33010602011771号