一个网页，Tab标签的切换是常见的功能，但我发现很少有前端工程师在做该功能的时候，会为用户多想想，如果你觉得鼠标hover到标签上，然后切换到相应的内容，就那么简单的话，你将是一个不合格的前端工程师啊，其实你不这样做，也无伤大雅，但是作为前端的工程师，我们可以为用户做到更好。想想如果一个网页上，有很多标签，而用户鼠标在不经意间快速的滑动了一下，如果tab标签的切换不经过特殊的处理的话，标签所对应的内容会一同切换，甚至还会想服务器请求内容，增加服务器开销，很显然这一行为不是用户想要的，我们完全可以避免或者减少这种情况发生，通过延迟加切换标签的操作，来提高用户体验，在多标签的网页上，这种尤为重要。下面直接贴源码，大家可以直接使用。
html源码：
<div class="Pannel ">
<div class="tabTitle ">
<ul class="tabs">
<li class="current"><a target="_blank">标签一</a></li>
<li ><a target="_blank">标签二</a></li>
</ul>
<div class="more">
<a target="_blank" href="">更多</a>
</div>
</div>
<div class="tabList">
<div class="linklist f14">
标签一内容
</div>
<div style="display: none;" class="linklist f14">
标签二内容
</div>
</div>
</div>
JS调用方式：
jQuery(".Pannel").Tabs(tabSelector: ".tabs li", conSelector: ".linklist", focusClass: "current"); //参数配置参考你具体的Class
Tab切换源码
jQuery.fn.Tabs = function (options) {
var defaults = {
tabSelector: ".tabs li", // 标签选项卡
conSelector: ".tabcontent", //选项卡内容
focusClass: "c", //标签选中后的样式
moreTrigger: ".tabTitle .more .link", // 扩展 选项卡上有更多的链接情况
events: "mouseover", //事件类型，支持"mouseover", "click"
selected: 0, //默认选中标签项
delay: 0.2 //事件延迟时间
};
var events = ["mouseover", "click"];
var settings = jQuery.extend({}, defaults, options);
var that = 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])
});
});
//接收两个参数 t延迟时间秒为单位，fn要执行的函数,m是否执行延迟取决于事件的类型
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);
}
}