javascript - 使用 JQuery 的 Bootstrap 3 Tabs 的外部链接

Question

我正在 Twitter Bootstrap 3 中使用选项卡，并希望其中一个选项卡充当打开新窗口的外部链接。我删除了 data-toggle="tab" 并添加了一些 JQuery 来完成此操作。下面的代码不起作用，并给出以下错误消息，但是如果我将 class="active" 添加到 li 元素，它就可以完美工作(除此之外选项卡样式不正确)。为什么会这样呢？如何更改我的代码，以便父级 li 上不需要 class="active"？:

HTML:

<li>
    <a href="https://www.google.com/" class="external-link" target="_blank">
        <span class="nav-text-wrapper">Example Tab Name</span>
    </a>
</li>

Javascript:

$('.external-link').click(function(){
  window.open($(this).attr('href'));
});

编辑:我找到了解决方案。我有以下 JQuery 代码来允许嵌套选项卡，但显然这与我在选项卡上使用外部链接发生冲突

var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
  e.preventDefault();  
    $(this).tab('show');
});

Answer 1

这个怎么样？

$('a.external-link').on('show.bs.tab', function (e) {
  e.preventDefault(); // prevents the default tab selection behavior
  window.open($(this).attr('href')); 
});

show.bs.tab 是在显示选项卡之前引发的事件。通过使用 e.preventDefault() 取消它，您会提前中断选项卡的 show() 函数并插入您自己的行为。如果您不像这样尽早停止 show() 函数，它将尝试选择 href 中引用的选项卡面板以显示它。您收到的错误是因为选项卡插件试图使用如下选择器查找 DOM 元素:$('https://www.google.com')。