2

I have some Boostrap tab action going. It has 3 tabs that loads content within the same page. This all works perfect!

However, on the 4th tab, I have a link that I want to open in a new window. Maybe I should not be using the tab function for this last element, but it looks best on the page and on mobile devices using it this way. Is there any way to link to an external link using bootstrap tabs? 

<ul class="nav nav-tabs push" data-toggle="tabs">
    <li class="active"><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li class="view_on_site"><a href="http://www.yahoo.com/" target="_blank">(View on Site)</a></li>
</ul>

Thanks for any help you can provide.

cvrebert
  • 9,075
  • 2
  • 38
  • 49
Hugo
  • 441
  • 1
  • 9
  • 17

2 Answers2

3

Bootstrap by default overrides the standard link functionality. You can get around this by adding your own custom click event to open the link in a new window.

HTML 

<ul class="nav nav-tabs push">
    <li class="active"><a role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
    <li><a role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
    <li><a role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
    <li class="view_on_site"><a class="link-tab" href="http://www.yahoo.com/" target="_blank">(View on Site)</a></li>
</ul>

jQuery/Javascript

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

Example: Fiddle

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • 1
    @Hugo please mark this answer as accepted if it resolved your question or leave feedback. Thanks – Trevor Aug 04 '14 at 20:17
3

Remove the data-toggle="tab" attribute and it will not trigger bootstrap hooks.

Credit to @Chamika Sandamal

pixelearth
  • 13,674
  • 10
  • 62
  • 110