先来说说项目中遇到的问题.
1.png
这里用的是bootstrap的框架，框架内tab切换是点击切换，但是需求换成鼠标滑过切换，点击进入全部列表。这里稍微修改下脚本。
// 鼠标滑过tab切换
$(".widget-infoMode").each(function () {
var item = $(this).children(".nav-tabs").find("li");
$(item).mouseover(function () {
var _this = $(this).index(); $(item).eq(_this).find("a").stop(true,true).tab("show");
});
// 点击tab切换详情页
$(item).on("click", function () {
var href = $(this).find("a").attr("href");
if(href !== null || href !== undefined || href !== ''){
window.open(href);
}
})
});
这里就会有问题，经常会碰到两个列表tab页在同一个页面展示的情况。
原因是hover绑定事件干扰，这里就需要对hover事件进行延时处理。
修改后的代码如下：
// 鼠标滑过tab切换
$(".widget-infoMode").each(function () {
var hoverTimer;
var item = $(this).children(".nav-tabs").find("li");
$(item).hover(function () {
var _this = $(this).index();
hoverTimer = window.setTimeout(function(){
console.log(_this);
$(item).eq(_this).find("a").stop(true,true).tab("show");
},200);
}, function () {
clearTimeout(hoverTimer);
});
// 点击tab切换详情页
$(item).on("click", function () {
var href = $(this).find("a").attr("href");
if(href !== null || href !== undefined || href !== ''){
window.open(href);
}
})
});
重点就是js的setTimeout方法，设置事件，延时触发函数，避免用户不经意的触发切换事件。
