jQuery实现简单的tabs选件卡封装

作者:沙师弟时间:2012-05-23
自从学会用jQuery.fn.extend之后,就开始喜欢上封装,今天由于项目的需求封装了一个简单tabs插件,现在分享给大家: 插件代码:
(function($){
/*******************************
         * @name 简单的tabs选项卡插件
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2012.05.18
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.tabs = function(Content){
		var _this  = this;
		var _index = 0;
		_this.live('mouseover',function(){
			_index  =  _this.index(this);
			hottop(_index);
		});
		function hottop(i){
			jQuery(Content).eq(i).stop(true,true).show().siblings(Content).hide();
			_this.eq(i).addClass('on').siblings().removeClass('on');
		}
	}
})(jQuery);
插件调用:
jQuery('.hotName li').tabs('.hotDetail');
html代码:
<ul class="hotName">
<li class="on">选项1</li>
<li>选项2</li>
</ul>
<div class="hotDetail on">选项内容1</div>
<div class="hotDetail">选项内容2</div>
是不是很简单呀,由于没有什么时间,就不做成demo了,还请见谅...完。