如何使boostrap选项卡在点击事件时指向特定的链接，而不是显示#选项卡

Question

我目前正在使用Bootstrap 3.3.4，我正在使用提供的JQuery选项卡。我要做的是让我的一个标签去到一个特定的链接，而不是一个div。下面是我想做的一个简单的例子:

<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>

所以基本上当我点击标签3，而不是去一个"特定的div"，我希望标签重定向到我的href上的实际链接。我不知道是否有一些bs js在避免操作，或者是否需要添加额外的js。

这里也有一个小提琴:https://jsfiddle.net/x3axxru9/

我很感激你的帮助!

Answer 1

在你的fiddle你有引导"data-toggle"属性在你的选项卡列表项。尝试从列表项中删除data-toggle="tab"。我想这就是阻止链接触发的原因。

Answer 2

只要从<a>元素中删除data-toggle="tab"属性，它就会像你想要的那样工作。

<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>