jq封装选项卡

//未封装

var tabTag=$("#tabon"); 
var tabon=tabTag.find("li");
var tabCon=$(".hidden");
tabon.each(function(i){
$(this).click(function(){
	tabon.removeClass("cur");
	$(this).addClass("cur");
	tabCon.eq(i).show().siblings().hide();
})
})

//封装的　　

function Tab(option){
	this.root=$(option.root);
	this.tabTag=this.root.find('#tabon li');
	this.hidden=this.root.find('.hidden');
	this.init();	
}
Tab.prototype={//prototype对象是实现面向对象的重要机制
	init:function(){
	var that=this;
this.tabTag.each(function(i){ //each()方法为每个匹配元素规定要运行的函数
	$(this).click(function(){
		that.tabTag.removeClass("cur");
		$(this).addClass('cur');
		that.hidden.eq(i).show().siblings().hide();
	})	
})			
	}	
}

$(function(){
new Tab({'root':$('.tab')});
//root选择器选取文档的根元素，new会创建pre的对象，没有new的话就没有任何可返回的值或对象，所以是undefined。
})

　HTML

<div class="tab tab_ship" id="tab">
<div class="tabon" id="tabon">
<ol>
<li class="cur"><a href="javascript:void(0)">菜单一</a></li>
<li class=""><a href="javascript:void(0)">菜单二</a></li>
</ol>
</div>
<div class="tabcon">
<div class="hidden" style="display:block;background:orange;width:100%;height:500px;">菜单一内容</div>
<div class="hidden" style="display:none;background:red;width:100%;height:500px;" >菜单二内容</div>
</div>

</div>