记录一下tabs插件。
/* tab box */ .x-tabs { } .x-tab-menu-box { position: relative; border-bottom: 1px solid #e8e8e8; } .x-tab-menu { position: relative; top: 1px; width: 100%; overflow: hidden; list-style: none; z-index: 3; } .x-tab-item { float: left; position: relative; height: 20px; line-height: 20px; padding: 3px 10px; background-color: #F2F2F2; border: 1px solid #D9D9D9; color: #7c7c7c; cursor: pointer; margin-right: 5px; } .x-tab-menu .x-tab-current { background-color: #ffffff; color: #555555; cursor: default; border-bottom-color: white; } .x-tab-box { background: white; border: 1px solid #D9D9D9; border-top: none 0; position: relative; } .x-tab-body { padding: 10px; display: none; } .x-tab-body-show { display: block; } ;(function($) { $.tabs = function($element, options) { var self = this; this.$element = $element; options.cls && $element.addClass(options.cls); // 宽度 options.width && options.width !='auto' && this.width(options.width); // 高度 options.height && options.height !='auto' && this.height(options.height); // 回调函数 options.onActive && this.on("active",options.onActive); this.$menu = $element.find(".x-tab-menu"); this.$body = $element.find(".x-tab-box"); this.active(options.active || 0 ,true); var delay=options.delay; $element.on(options.event,".x-tab-item",function(e){ var sf=self,$li=$(this); sf.pause(); sf._active_timer_ && clearTimeout(sf._active_timer_); sf._active_timer_= delay > 0 ? setTimeout(function(){sf.active($li);},delay) : sf.active($li); e.preventDefault(); }); // 自动播放 var play=options.play; $element.hover(function(e){self.pause();},function(e){play && self.play();}); !!play && this.play($.isNumeric(play) ? play : 3000); return this; }; $.tabs.prototype.width = function(width){ var $ele = this.$element; if(width == undefined){return $ele.width();} $.isNumeric(width) ? $ele.width(width+"px") : $ele.css("width",width); return this; }; $.tabs.prototype.height = function(height){ var $ele = this.$body; if(height == undefined){return $ele.height();} $.isNumeric(height) ? $ele.height(height+"px") : $ele.css("height",height); return this; }; // 自动播放 $.tabs.prototype.play = function(interval){ var self=this; this.pause(); this._play_interval_ = interval || this._play_interval_; this._active_interval_ = setInterval(function(){ var sf=self,$menu=sf.$menu,$current=$menu.find("> .x-tab-current"); var $next = $current.length == 0 ? $menu.find("> .x-tab-item:eq(0)").next() : $current.next(); $next.length == 0 ? $next=$menu.find("> .x-tab-item:eq(0)") : false; sf.active($next); },this._play_interval_); return this; }; // 停止自动播放 $.tabs.prototype.pause = function(){ this._active_interval_ && clearInterval(this._active_interval_); return this; }; /** 选择 * */ $.tabs.prototype.active = function($li,force) { var index = -1,cls="x-tab-current"; $li instanceof jQuery ? index=$li.index() : (index = $li ,$li=this.$menu.find("> li:eq("+index+")")); if(index == -1){return this;} force=!!force; if(!force && $li.hasClass(cls)){return this}; var $current=this.$menu.find("> ."+cls),old=$current.length ? $current.index() : -1; // 旧有活跃标签页处理 old !=-1 && $current.removeClass(cls) && this.$body.find("> .x-tab-body:eq("+old+")").removeClass("x-tab-body-show"); // 设置活跃标签页 $li.addClass(cls) && this.$body.find("> .x-tab-body:eq("+index+")").addClass("x-tab-body-show"); // 触发事件 this.trigger("active",index,old); return this; }; $.tabs.prototype.trigger = function(event) { var params = [ this]; for ( var i = 1, l = arguments.length; i < l; i++) params[i] = arguments[i]; var type=event.toUpperCase(); event=new jQuery.Event(type, type+"."+this.widget ); this.$element.triggerHandler(event, params); return event; }; $.tabs.prototype.on = function(event, handler) { this.$element.on(event.toUpperCase() + "." + this.widget, handler); return this; }; $.tabs.prototype.one = function(event, handler) { this.$element.one(event.toUpperCase() + "." + this.widget, handler); return this; }; $.tabs.prototype.off = function(event, handler) { this.$element.off(((event && event.toUpperCase()) || '') + "." + this.widget, handler); return this; }; $.tabs.prototype.widget = 'tabs'; $.fn.tabs = $.fn.Tabs = function(options) { var f=null,fields=[]; for(var i=0,l=this.length;i<l;i++){ f=$.data(this[i], "widget"); !f ? (f=new $.tabs(this.eq(i), $.extend( {}, $.fn.tabs.defaults, options)),$.data(this[i], "widget", f)) : false; fields[i]=f; } return l===1 ? fields[0] : fields; }; $.fn.tabs.defaults = { active:0, cls : '', event : 'mouseover', width : 'auto', height : 'auto', delay:0, play:false }; })(jQuery);
<div id='tab_test' class='x-tabs'>
<div class='x-tab-menu-box'>
<ul class='x-tab-menu'>
<li class='x-tab-item x-tab-current'><a>运价查询</a></li>
<li class='x-tab-item'><a>船期查询</a></li>
<li class='x-tab-item'><a>货物跟踪</a></li>
<li class='x-tab-item'><a>报关查询</a></li>
</ul>
</div>
<div class='x-tab-box'>
<div class='x-tab-body x-tab-body-show'>1</div>
<div class='x-tab-body '>2</div>
<div class='x-tab-body '>3</div>
<div class='x-tab-body '>4</div>
</div>
</div>
$("#tab_test").tabs({ play:true, width : 600, active:2 });