没有选项卡链接的引导可切换选项卡答案

【问题标题】：Bootstrap toggleable tabs without having tab links没有选项卡链接的引导可切换选项卡
【发布时间】：2014-09-06 10:31:33
【问题描述】：

有没有办法做到以下几点

<!-- 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 的选项卡窗格，但我不希望它有一个作为选项卡的链接，但我确实希望它可以通过其他事件进行切换

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

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap tabs

【解决方案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')
});

Working demo in jsFiddle

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

所以首先移除所有活动元素，然后重新添加活动类：

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

Working demo in jsFiddle

【讨论】：

不需要自己定义.hidden，它已经是Bootstrap的一部分：getbootstrap.com/css/#helper-classes-show-hide
@cvrebert，我以为我从某个地方想出了这个名字 :)
第二种方法的缺点是您不会收到诸如“show.bs.tab”、“shown.bs.tab”等事件。
@BenCollier，真的。第二步是滚动您自己的实现，因此可能会遗漏一些其他内容。如果您想添加事件，您可以使用类似$(this).trigger({type:'shown.bs.tab'}) 的方式自行触发它们

【解决方案2】：

在内存中创建一个链接并在其上调用tab函数。

$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")

【讨论】：

【解决方案3】：

当您想要导航时使用锚链接。如果您不想导航，请使用按钮。但将其设置为链接。

<ul class="nav nav-tabs">
  <li role="presentation" class="active">
   <button class="btn btn-sm btn-link">Tab1</button>
  </li>
</ul>

现在它是一个按钮，不会导航。只需添加您想要的任何 javascript。但我建议使用锚。 Javascript 选项卡不支持浏览器中的历史记录。从前任开始通常很棘手。选项卡编号 4 已选择。我经常让每个标签页成为自己的页面。有自己的路线

【讨论】：