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/

Solution 1

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

Solution 2

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/

Comments

[Henry Ruhs]

Create a jsfiddle... otherwise no help I guess

[Jamie Romeo]

@redaxmedia I've inserted the code in a jsFiddle but I couldn't get the bootstrap js to work in there for some strange reason. Added the jsFiddle to the thread either way.

[Rahil Wazir]

@user3289625 You need add jQuery framework to jsfiddler. See here

[Jamie Romeo]

@RahilWazir Ahh I see. I've updated the jsFiddle now.

[Rahil Wazir]

Is this possible what you are achieving with bootstrap? However if you need jquery solution?

[User 1058612]

In looking at the fiddle, it looks like the JS functionality is working as intended - the Bootstrap tab JS is looking specifically for a <ul><li> to mark as active, and not active: this.activate($this.parent('li'), $ul)