0

我目前正在使用 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/

我感谢您的帮助！

4

2 回答 2

3

在您的小提琴中，您的选项卡列表项上有引导“数据切换”属性。尝试从列表项中删除 data-toggle="tab"。我认为这就是阻止您的链接触发的原因。

于 2015-09-09T19:03:56.547 回答
0

只需从元素中删除 data-toggle="tab" 属性<a>，它就会按您的意愿工作。

<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>
于 2015-09-09T19:02:27.147 回答