如何使引导程序选项卡在单击事件时转到特定的 link 而不是显示 #tab

Question

我目前正在使用 Bootstrap 3.3.4，并且我正在使用提供的 JQuery 选项卡。我想要做的是让我的选项卡之一转到特定的 link 而不是 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 而不是转到 "specific div" 时，我希望该选项卡将我重定向到我的 href 上的实际 link。不知道是不是某些bs js在回避动作，还是我需要加额外的js。

这里也有一个小fiddle：https://jsfiddle.net/x3axxru9/

感谢您的帮助！

Answer 1

只需从 <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>

Answer 2

在您的 fiddle 中，您的选项卡列表项具有 bootstrap "data-toggle" 属性。尝试从列表项中删除 data-toggle="tab" 。我认为这就是阻止 link 触发的原因。

如何使引导程序选项卡在单击事件时转到特定的 link 而不是显示 #tab

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

jquery

twitter-bootstrap

bootstrap-tabs