通过 onclick 引导导航选项卡触发切换答案

【问题标题】：bootstrap nav tab trigger toggle by onclick通过 onclick 引导导航选项卡触发切换
【发布时间】：2016-10-30 01:51:17
【问题描述】：

所以我的页面顶部有两个导航选项卡可以在两个视图之间切换：

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
  <li><a data-target="#second-tab" data-toggle="tab">BAR Tab</a></li>
</ul>

<div class="tab-pane fade in active" id="first-tab"> [...] </div>
<div class="tab-pane fade in active" id="second-tab"> [...] </div>

除了使用选项卡之外，还有其他方法可以在两个窗格之间切换吗？所以说我在第一个选项卡 div 中有一个按钮，单击时它将切换到第二个选项卡 div。我想删除完整的选项卡，并使用另一种方式触发到窗格之间的切换，例如在 onclick 函数中

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

<div class="tab-content">
  <div class="tab-pane fade in active" id="first-tab">
    <a data-target="#second-tab" data-toggle="tab">BAR Tab</a>
  </div>
  <div class="tab-pane fade" id="second-tab">
    <a data-target="#first-tab" data-toggle="tab">FOO tab</a>
  </div>
</div>

当然可以，但是你犯了两个错误：

只有一个 div 标签可以有 in active 类。
您必须在选项卡 div 周围创建另一个类为 tab-content 的 div。

CODEPEN

JS 版本：

('[data-target=#first-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
$('[data-target=#second-tab]').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

CODEPEN

【讨论】：

我的道歉我不清楚，我知道该怎么做，但我不知道如何用 javascript 来做，因为我需要先做一些条件检查并填充一些变量可以决定是否有开关。就像我们如何用location.hash="#/secondView" 归档<a href="#/secondView"> 谢谢
添加了JS代码，之后可以去掉链接中的data-toggle="tab"。
谢谢，有没有办法只使用 javascript 和内联 onclick 函数？我尝试更改您的示例，但它对我不起作用，有什么提示吗？
例如为什么这不起作用： onclick="secondTabClick()" ` var secondTabClick = function(){ $('#first-tab').tab('show'); }`

【解决方案2】：

实际上很简单，只需复制并粘贴您最初用于切换选项卡的 UL，然后可能取出您不再需要的 LI，引导选项卡将不起作用，除非它们位于具有类集的 UL 元素中导航到导航标签

像这样：

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
  <li><a data-target="#second-tab" data-toggle="tab">BAR Tab</a></li>
</ul>

<div class="tab-pane fade in active" id="first-tab"> [...] </div>
<div class="tab-pane fade in " id="second-tab"> [

<ul class="nav nav-tabs">
  <li class="active"><a data-target="#first-tab" data-toggle="tab">FOO tab</a></li>
</ul>
 </div>

【讨论】：