How to make boostrap tab go to a specific link on click event instead of showing the #tab

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!

Solution

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.