Changing the active class as well as content in nav pills

css, html, javascript, twitter-bootstrap, twitter-bootstrap-3

Solution

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

Problem

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/

Original source