悬停时带有可点击链接的引导选项卡答案

【问题标题】：Bootstrap tabs on hover with clickable links悬停时带有可点击链接的引导选项卡
【发布时间】：2015-06-10 10:13:27
【问题描述】：

我正在使用引导选项卡功能，我想实现以下功能：

使用 mouseenter 而不是单击在选项卡之间切换
防止对链接的点击操作。

这是我的 jsfiddle 示例代码。 https://jsfiddle.net/irider89/bmLpwtqb/3/

$('.nav li a').hover(function (e) {
    e.preventDefault()
    $(this).tab('show');
});

$('.nav li a').click(function (e) {
    return true;
});

如何做到这一点？

我需要能够点击主菜单项（主页、个人资料、消息、设置）并转到特定的 url。

【问题讨论】：

问题/疑问是什么？
您的 JSFiddle 似乎工作正常，您想达到什么目的？
我需要能够点击主菜单项（主页、个人资料、消息、设置）并转到特定的网址。

标签： javascript jquery twitter-bootstrap bootstrap-tabs

【解决方案1】：

不要使用window.location.href = ... 方法！鼠标中键不起作用。

1) 在悬停时切换。 在文档对象上绑定一个简单的 mouseenter 处理程序：

$(document).on('mouseenter', '[data-toggle="tab"]', function () {
  $(this).tab('show');
});

2) 防止点击。 最好使用.off('click', ...) 方法重置Bootstrap 内置处理程序，而不是编写处理自定义数据属性的自定义点击处理程序。像这样：

$(document).off('click.bs.tab.data-api', '[data-toggle="tab"]');

然后使用原生href 指定外部链接，data-target 指向内容窗格。

还有一个小的 Bootstrap 插件可以自动完成所有这些操作：https://github.com/tonystar/bootstrap-hover-tabs。

Demo

【讨论】：

嘿嘿在插件“mouseenter.bs.tab.data-api”中使用，附件是什么意思？如果我还想添加焦点，“focus.bs.tab.data-api”是否正确？
正确！这是事件命名空间 (learn.jquery.com/events/event-basics/#namespacing-events)。您也可以将两者与空间结合起来。

【解决方案2】：

使用一些新的“data-”属性来提及 url，如下所示

<a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-href="www.google.com">Home</a>

并像这样使用脚本

 $('.nav li a').on("click",function (e) {
          window.location.href = $(this).attr("data-href");
    });

【讨论】：

【解决方案3】：

用这个去url：

$('.nav li a').click(function (e) {
   window.location.href = $(this).attr("href");
});

【讨论】：

谢谢，但在这种情况下，如果在导航链接中我将添加链接而不是 id，则 mouseenter 功能不起作用。
抱歉我的英语不好。我想说的是，我仍然需要能够在悬停时使用标签功能，并且也能够点击导航链接。
所以你想使用“鼠标”和“点击”来切换标签？
我想通过 «mouseenter» 来切换它们，当我点击它们时——它们的行为就像普通链接（带有自定义 href 链接）。
因此，如果我理解正确，您可以在 mouseenter 上添加“Active”类并使用上述点击功能。

【解决方案4】：

您可以简单地使用此代码来实现该功能 1，在悬停时更改标签

$('.nav-tabs li').hover(function(){
    $('.nav-tabs li a').removeClass('active show');
    $(this).children('a').addClass('active show');
    var href = $(this).children('a').attr('href');
    href = href.substr(1);
    $('.tab-pane').removeClass('active show');
    $('#'+href).addClass('active show');
});

对于下一个功能，添加此代码以禁用单击

$('.nav-tabs li').click( function(e){
    e.prevenetDefault(); 
}

【讨论】：

【解决方案5】：

试试这个：

//first, we need to show tab-content on mouseover
$(".nav-link").mouseover( function() {
    $(this).tab("show");
});

// on hovering quickly, need to remove the active class from the related tab panel
$(".nav-link").on("show.bs.tab", function(e) {
    const tabPanelId = e.relatedTarget.getAttribute("href");
    $(tabPanelId).removeClass("active");
});

【讨论】：