Twitter bootstrap 3 引导选项卡不使用“下一步”按钮切换

我想用“下一步”和“上一步”按钮切换选项卡，但当我单击按钮时，选项卡的内容切换良好，但“活动选项卡”切换不好。 这里有一把小提琴：

红色
红-红-红-红

下一个
橙色
橙橙橙

下一个
黄色的
黄黄黄

---

谢谢你的帮助

你必须这样做

这是您的工作代码： 还是这个代码

HTML:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

---

你必须这样做

这是您的工作代码： 还是这个代码

HTML:

<ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Shipping</a></li>
    <li><a href="#tab2" data-toggle="tab">Quantities</a></li>
    <li><a href="#tab3" data-toggle="tab">Summary</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <a class="btn btn-primary btnNext" >Next</a>
    </div>
    <div class="tab-pane" id="tab2">
        <a class="btn btn-primary btnNext" >Next</a>
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
    <div class="tab-pane" id="tab3">
        <a class="btn btn-primary btnPrevious" >Previous</a>
    </div>
</div>

在引导4中，

active

类被放置在

a

标记中，而不是

li

标记中（如引导3）。 Bootstrap 3中的选项卡示例：

<ul class="nav nav-tabs">
  <li class="active">  <!-- active class is an attribute of the <li> element! -->
    <a href="#tab1" data-toggle="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab">Tab 2</a>
  </li>
</ul>

按钮的HTML格式：

<button class="btn-next">Next</button>

下一步

我在Codeply上看到了类似的解决方案：

希望这有帮助

在引导4中，

active

类被放置在

a

标记中，而不是

li

标记中（如引导3）。 Bootstrap 3中的选项卡示例：

<ul class="nav nav-tabs">
  <li class="active">  <!-- active class is an attribute of the <li> element! -->
    <a href="#tab1" data-toggle="tab">Tab 1</a>
  </li>
  <li>
    <a href="#tab2" data-toggle="tab">Tab 2</a>
  </li>
</ul>

按钮的HTML格式：

<button class="btn-next">Next</button>

下一步

我在Codeply上看到了类似的解决方案：

---

希望这有帮助

谢谢你的及时答复。我是bootstrap和angular2的新手，你知道如何在typescript上编写javascript代码吗？@ZazaAngular-既然这个答案有效，你应该将它标记为已接受。将js转换为ts是一个单独的问题。对不起，我标记为accepted的速度太快，我用这个答案更新了我的小提琴，但它不起作用：-/也许我遗漏了什么？谢谢你的快速回答。我是bootstrap和angular2的新手，你知道如何在typescript上编写javascript代码吗？@ZazaAngular-既然这个答案有效，你应该将它标记为已接受。将js转换为ts是一个单独的问题。对不起，我标记接受的速度太快了，我用这个答案更新了我的小提琴，但它不起作用：-/也许我遗漏了什么？注意到了。我看的是v4引导教程，而不是我的项目使用的v3。我看的是v4引导教程，而不是我的项目使用的v3。

<button class="btn-next">Next</button>