External link with Bootstrap 3 Tabs using JQuery

Question

I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent 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 found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs

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

Answer 1

How about this?

$('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 is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault() , you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com') .