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.js的工作方式是在链接上触发tab('show')而不是在窗格本身上，如何在不使用选项卡的情况下触发选项卡窗格？

注意：我知道它在选项卡窗格上执行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')
});

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

Answer 2

当您想要导航时使用锚链接。如果您不想导航，请使用按钮。但是它就像一个链接。

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

指出它的按钮，不会导航。只需添加您想要的任何JavaScript。但我建议使用锚点。 Javascript选项卡不支持在浏览器中返回历史记录。从ex开始往往很棘手。选项卡号4。我经常让每个标签页都是一个自己的页面。有自己的路线

Answer 3

在内存中创建链接，然后在其上调用tab函数。

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

Bootstrap可切换选项卡，没有选项卡链接

3 个答案:

Working demo in jsFiddle

Working demo in jsFiddle