Very good tab tab switch function, delay tab switch.

A Web page, Tab tab switch is a common function, but I found very few front-end engineers in the function of the time, will for users to think more, if you think the mouse hover to the label, and then switch to the corresponding content, it is so simple, you will be a unqualified front-end engineer Ah, actually you do not, It's harmless, but as a front-end engineer, we can do better for the user. Think if a page, there are a lot of tags, and the user mouse inadvertently quickly sliding a bit, if the tab tag switch without special processing, the corresponding content of the label will be switched together, and even want the server to request content, increase the server overhead, it is obvious that this behavior is not what the user wants, We can completely avoid or reduce this situation, by delaying the operation of switching tags to improve the user experience, on a multi-tabbed Web page, this is particularly important. Directly below the source code, we can directly use.

HTML Source:
<div class= "Pannel" >
<div class= "Tabtitle" >
<ul class= "Tabs" >
<li class= "Current" ><a target= "_blank" > Label one </a></li>
<li ><a target= "_blank" > tags two </a></li>
</ul>
<div class= "More" >
<a target= "_blank" href= "" > More </a>
</div>
</div>
<div class= "TabList" >
<div class= "Linklist F14" >
Label a content
</div>
<div style= "Display:none;" class= "Linklist F14" >
Label two content
</div>
</div>
</div>

JS Call mode:
JQuery (". Pannel ").  Tabs (tabselector: ". Tabs li", conselector: ". Linklist", Focusclass: "Current"); Parameter configuration refer to your specific class

TAB Switch Source

JQuery.fn.Tabs = function (options) {
var defaults = {
Tabselector: ". Tabs li",//Tab tab
Conselector: ". Tabcontent",//tab contents
Focusclass: "C",//tab-selected style
Moretrigger: ". Tabtitle. More. Link",//Extension tab for more links
Events: "MouseOver",//event type, support for "MouseOver", "click"
selected:0,//Default Check tab entry
delay:0.2//Event delay time
};
var events = ["MouseOver", "click"];
var settings = Jquery.extend ({}, defaults, options);
var = this;
var _tabs = JQuery (Settings.tabselector, that);
var _cons = JQuery (Settings.conselector, that);
var _more = JQuery (Settings.moretrigger, that);
var _isdelay = Settings.events = = Events[0]?!0:! 1;

void function () {
var tab = _tabs.eq (settings.selected);
if (tab && tab.length = = 0) {
tab = _TABS.EQ (0);
}
Tab.addclass (Settings.focusclass);
Tab.siblings (Settings.tabselector). Removeclass (Settings.focusclass);

var cons = _cons.eq (settings.selected);
if (cons && cons.length = = 0) {
Cons = _cons.eq (0);
}
Cons.show ();
Cons.siblings (Settings.conselector). Hide ();

var more = _more.eq (settings.selected);
if (more && more.length = = 0) {
more = _more.eq (0);
}
More.show ();
More.siblings (). Hide ();
}();

_tabs.each (function (i, v) {
JQuery (v). On (settings.events, function () {
var _this = this;
Delay.apply (This, [Settings.delay, function () {
JQuery (_this). addclass (Settings.focusclass);
JQuery (_this). Siblings (Settings.tabselector). Removeclass (Settings.focusclass);
JQuery (_cons[i]). Show ();
JQuery (_cons[i]). Siblings (Settings.conselector). Hide ();
JQuery (_more[i]). Show ();
JQuery (_more[i]). Siblings (). Hide ();
}, _isdelay])
});
});
Receives two parameters T delay time in seconds, fn to execute the function, m whether execution delay depends on the type of event
var delay = function (t, FN, m) {
if (m) {
var _this = this,
D = setinterval (function () {
Fn.apply (_this);
}, T * 1000);
_this.onmouseout = function () {
Clearinterval (d);
};
}
else fn.apply (this);
}
}

Very good tab tab switch function, delay tab switch.