title: Changing the active class as well as content in nav pills
body: <p>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:</p>
  
  <pre><code>&lt;div id="rootwizard"&gt;
     &lt;div class="navbar"&gt;
        &lt;div class="navbar-inner"&gt;
           &lt;div class="container"&gt;
              &lt;ul class="nav nav-pills"&gt;
                 &lt;li class="active"&gt;&lt;a href="#step1" data-toggle="tab"&gt;Step 1&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#step2" data-toggle="tab"&gt;Step 2&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="#step3" data-toggle="tab"&gt;Step 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane" id="step1"&gt;
           &lt;a class="btn" href="#step2" data-toggle="tab"&gt;Continue&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="step2"&gt;
           Step 2
           &lt;a class="btn" href="#step3" data-toggle="tab"&gt;Continue&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="step3"&gt;
           Step 3
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>Why doesn't the active class change like when I click the pill itself?</p>
  
  <p>Here's a jsFiddle with the code:
  <a href="http://jsfiddle.net/MvY4x/5/" rel="nofollow">http://jsfiddle.net/MvY4x/5/</a></p>