CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Jamie Romeo
Jamie Romeo

Reputation: 255

Changing the active class as well as content in nav pills

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/

Upvotes: 5

Views: 21301

Answers (4)

Jason Carpenter
Jason Carpenter

Reputation: 71

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/

Upvotes: 7

Carol Skelly
Carol Skelly

Reputation: 362380

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

Upvotes: 4

Henry Ruhs
Henry Ruhs

Reputation: 1630

I hacked this fiddle: http://jsfiddle.net/MvY4x/7/

$('div.tab-content a[data-toggle]').on('click', function ()
{
    var that = $(this),
        link = that.attr('href');

    $('a[href="' + link + '"]').not(that).trigger('click');
});

Really a bad ass hack, needs improvement but may give an idea...

Upvotes: -1

Snowburnt
Snowburnt

Reputation: 6922

you could add Ids to the pills (step1tab, etc) and then make a function a function like this:

function switchPill(a,b){
    $("#step"+a+"tab").removeClass("active");
    $("#step"+b+"tab").addClass("active");
}

and add this to the anchor tag of the text:

onClick="switchPill(2,3)"

Upvotes: 0

Related Questions