Внешняя ссылка с Bootstrap 3 вкладками с использованием JQuery

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

EDIT: I нашел решение. Я имел следующий 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').