0

I'm currently using Bootstrap 3.3.4 and I'm using the JQuery Tabs provided. What I'm trying to do is to make one of my tabs go to a specific link isntead to a a div. Here is a brief example of what I wanna do:

<ul class="nav nav-tabs">
   <li class="active" id="title-one"><a href="#tab1">TAB 1</a></li>
   <li id="title-two"><a href="#tab2">TAB 2</a></li>
   <li id="title-three"><a href="www.google.com">TAB 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">Content 1</div>
    <div id="tab2" class="tab-pane fade ">Content 2</div>
</div>

So basically when I click on tab 3 instead of going to a "specific div" I want the tab to redirect me to the actual link on my href. I don't know if some bs js is avoiding the action or if I need to add extra js.

Here is a small fiddle too: https://jsfiddle.net/x3axxru9/

I appreciate your help!

Diana
  • 87
  • 2
  • 2
  • 9

2 Answers2

3

In your fiddle you have the bootstrap "data-toggle" attributes on your tab list-items. Try removing the data-toggle="tab" from the list-item. I think that's what's stopping your link from triggering.

Gregg Duncan
  • 2,635
  • 1
  • 14
  • 20
  • Hi, yes it did work, however I realized it works only for relative links because for any reason the 1st part of the link is not deleted, so in this case I get: linkpath/linkpath/www.google.com I assume is a bs thing? – Diana Sep 09 '15 at 20:13
  • If you want to create a web link that is NOT relative you have to include at least a '//' before your url. Any link that doesn't start with 'http://' or 'https://' or '//' will be considered relative. The '//' is a special case that basically says it is an absolute path but use whatever protocol this page is using. – Gregg Duncan Sep 10 '15 at 19:51
0

Just erase the data-toggle="tab" attribute from the <a> element and it will work as you want.

<ul class="nav nav-tabs">
    <li class="active" id="title-one"><a data-toggle="tab" id="tab-one" href="#tab1">TAB 1</a></li>
    <li id="title-two"><a data-toggle="tab" id="tab-two"  href="#tab2">TAB 2</a></li>
    <li id="title-three"><a id="tab-three" href="www.google.com">TAB 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">Content 1</div>
    <div id="tab2" class="tab-pane fade ">Content 2</div>
    <div id="tab3" class="tab-pane fade ">Content 3</div>
</div>
Pablo Meni
  • 87
  • 9