通过onclick

Question

所以我在页面顶部有两个导航标签，可以在两个视图之间切换：

<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功能

Answer 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>

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

1. 只有一个div标签可以有in active个类。
2. 你必须在tab divs周围创建另一个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

Answer 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>