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}