使用JQuery与Bootstrap 3选项卡的外部链接

Question

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

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中引用的标签面板以显示它。你得到的错误是因为tab插件试图找到一个带有这样的选择器的DOM元素：$('https://www.google.com')。