引导选项卡悬停在带有可点击链接的鼠标上

Question

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

1. 使用鼠标输入而不是单击在选项卡之间切换
2. 防止对链接执行单击操作。

这是我的 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。

Answer 1

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

---

1） 打开悬停。在文档对象上绑定一个简单的鼠标输入处理程序：

$(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。

演示

Answer 2

使用一些新的"data-"属性来提及网址，如下所示

<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");
    });

Answer 3

使用它去网址：

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

Answer 4

您可以简单地使用此代码来实现该功能 no 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(); 
}

Answer 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");
});

Answer 6

上述答案并不完全有效。当用户在选项卡之间半快速悬停时，TonyStar 演示会迅速中断。代码已更新，以添加延迟以避免该问题。添加 data-url=" 属性，在点击时要链接到网站的任何标签页。

<script>
  (function($) {
    $(function() {
      $(document).off('click.bs.tab.data-api', '[data-hover="tab"]');
      $(document).on('mouseenter.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function() {
        var $this = $(this);
        if (!$this.hasClass('active') && !$this.hasClass('disabled')) {
          var delay = setTimeout(function() {
            $this.tab('show');
          }, 150);
          $this.data('tab-delay', delay);
        }
      }).on('mouseleave.bs.tab.data-api', '[data-toggle="tab"], [data-hover="tab"]', function() {
        var $this = $(this);
        clearTimeout($this.data('tab-delay'));
      }).on('click', '[data-hover="tab"]', function() {
        var $this = $(this);
        var url = $this.data('url');
        if (url) {
          window.location.href = url;
        }
      });
    });
  })(jQuery);
</script>