没有标签链接的 Bootstrap 可切换标签

Question

有没有办法做到以下几点

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
  <div class="tab-pane" id='extra'> .... </div>

</div>

所以还有另一个名为 的选项卡窗格#extra，但我不希望它有一个链接作为选项卡，但我确实希望它可以被其他事件切换

由于 bootstrap tabs.jstab('show')在链接上触发 a而不是在窗格本身上工作，如何在不处理选项卡的情况下触发选项卡窗格？

注意：我知道它在选项卡窗格上执行 show() 和 hide() 的基本操作，但我觉得手动执行所有这些操作会阻止我使用回调等

Answer 1

您可以添加附加选项卡，然后将其隐藏

将此添加到您的nav-tabs：

<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>

然后使用 JavaScript 从其他地方激活：

$("#launchExtra").click(function() {
    $('#myTab a[href="#extra"]').tab('show')
});

jsFiddle 中的工作演示

或者，您可以自己处理整个事情。唯一.tab('show')所做的就是与所有其他清除活性类nav-tabs和tab-content元素。然后.active在适当的元素上重新添加类。

因此，首先删除所有活动元素，然后重新添加活动类：

$("#launchExtra").click(function() {
    $(".nav-tabs .active, .tab-content .active").removeClass("active");
    $("#extra").addClass("active");
});

jsFiddle 中的工作演示