学习jquery写的一个简单的tab切换效果

关于这个tab切换的js，之前自己学习jquery的时候写的，后来整理就把它记录下来了，不专业，希望大家多指导指导。废话不多说了上代码

css代码：

.tab-wrap-div{width:500px; margin: 100px auto;}
.ui-tab{width:500px; height:40px;background:#444; color:#fff;}
.ui-tab li{width:25%;height:40px; line-height:40px; float:left; cursor:pointer;text-align:center;}
.tab-hover{background:#000;}
.tab-active{color:#fff; font-weight:600; background:#AE0F1F}
.tab-cont{width:498px; height:100px; border:1px solid #ddd; text-align:center; font-size:30px; padding-top:50px; text-shadow:5px 5px 5px #999;} 

<div class="tab-wrap-div">
    <ul class="ui-tab tab-nav">
        <li class="tab-active">前端吧导航</li>
        <li>前端吧导航</li>
        <li>前端吧导航</li>
        <li>前端吧导航</li>
    </ul>
    <div class="tab-cont">0我是前端吧网站的内容区</div>
    <div class="tab-cont" style="display:none;">1我是前端吧网站的内容区</div>
    <div class="tab-cont" style="display:none;">2我是前端吧网站的内容区</div>
    <div class="tab-cont" style="display:none;">3我是前端吧网站的内容区</div>
</div>

js:

;(function($){	
	$.fn.tab=function(options){
		var opt={
			tabNav:'.tab-nav li',   //选项卡tab
			tabMain:'.tab-cont',   //选项卡主体内容
			tabTrigger:'click',    //tab绑定的触发事件
			hoverClass:'tab-hover',  //tab鼠标hover时的class
			activeClass:'tab-active'  //tab选中的效果的class
		}		
		var option=$.extend({},opt,options);
		var $tabNav=$(option.tabNav),
		    $cont=$(option.tabMain);
		   $tabNav.on(option.tabTrigger,function(){
		      var $tabIndex=$(this).index();
			  $(this).addClass(option.activeClass).siblings().removeClass(option.activeClass);
			  $(option.tabMain).eq($tabIndex).show().siblings(option.tabMain).hide();
		   })
		   $tabNav.hover(function(){
		        $(this).addClass(option.hoverClass).siblings().removeClass(option.hoverClass);
		   },function(){
		        $(this).removeClass(option.hoverClass);
		   })		
	}
})(jQuery);

然后直接调用：$(“.tab-nav”).tab();就可以了。

参数可以修改比如：

$(“.tab-nav”).tab({
     activeClass:’cur’
});

具体demo:请猛击这里！