Changing the active class as well as content in nav pills

Question

Basically I'm trying to create a "wizard" via bootstrap where the active tab changes when the "continue" button is clicked. I've managed to come up with the following code:

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

Right now it works fine when I click the nav pills themselves (the content changes and the active pill changes too). However when I click the individual continue button the content changes but the active nav pill does not change.

Why doesn't the active class change like when I click the pill itself?

Here's a jsFiddle with the code: http://jsfiddle.net/MvY4x/5/

Answer 1

Just found this much more elegant solution...

$('ul.nav.nav-pills li a').click(function() {           
    $(this).parent().addClass('active').siblings().removeClass('active');           
});

from: http://info.michael-simons.eu/2012/07/30/twitter-bootstrap-make-the-default-pills-more-usable/

Answer 2

You could use jQuery to activate the next tab and it's content. Give all of your continue buttons a class like 'continue' and then you can do something like this..

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

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

})

Demo on Bootply: http://bootply.com/112163