javascript - 更改事件类别以及导航药丸中的内容

基本上，我试图通过 bootstrap 创建一个“向导”，当单击“继续”按钮时，事件选项卡会更改。我设法提出了以下代码:

<div id="rootwizard">
   <div class="navbar">
      <div class="navbar-inner">
         <div class="container">
            <ul class="nav nav-pills">
               <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li>
               <li><a href="#step2" data-toggle="tab">Step 2</a></li>
               <li><a href="#step3" data-toggle="tab">Step 3</a></li>
            </ul>
         </div>
      </div>
   </div>
   <div class="tab-content">
      <div class="tab-pane" id="step1">
         <a class="btn" href="#step2" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step2">
         Step 2
         <a class="btn" href="#step3" data-toggle="tab">Continue</a>
      </div>
      <div class="tab-pane" id="step3">
         Step 3
      </div>
   </div>
</div>

现在，当我单击导航药丸本身时，它可以正常工作(内容发生变化，有效药丸也发生变化)。
但是，当我单击单个继续按钮时，内容会更改，但事件的导航药丸不会更改。

为什么事件类不会像单击药丸本身那样发生变化？

这是带有代码的jsFiddle:
http://jsfiddle.net/MvY4x/5/

最佳答案

您可以使用jQuery激活下一个选项卡及其内容。给您所有的继续按钮一个类似“继续”的类，然后您可以执行类似的操作。

$('.continue').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

})

Bootply上的演示:http://bootply.com/112163