Navigate to another tab by using javascript functions

Question

friends,

I have created tabs using bootstrap.I am struggling to create this scenario.

By clicking on a submit button, active tab should switch to another tab.

<div id="checkout-progress">
  <ul class="nav nav-tabs">
     <li class="active"><a href="#tab1"  data-toggle="tab"><i class="icon-map-marker icon-large"></i><span>Billing address</span></a></li>
     <li><a href="#tab2"  data-toggle="tab"><i class="icon-envelope icon-large"></i><span>Shipping address</span></a></li>
     <li><a href="#tab3"  data-toggle="tab"><i class="icon-truck icon-large"></i><span>Shipping method</span></a></li>
     <li><a href="#tab4"  data-toggle="tab"><i class="icon-money icon-large"></i><span>Payment method</span></a></li>
     <li><a href="#tab5"  data-toggle="tab"><i class="icon-search icon-large"></i><span>Order review</span></a></li>
   </ul>                    
</div>

<div class="tab-pane active" id="tab1">
   <div class="box-header">
     <h3>Billing Address</h3>                                                   
   </div>
   <div class="box-footer">
     <div class="pull-right">                                                    
        <button type="submit" class="btn btn-primary">
            Shipping Address &nbsp; <i class="icon-chevron-right"></i>
        </button>
     </div>
   </div>                   
</div>

<div class="tab-pane active" id="tab2">
   <div class="box-header">
     <h3>Billing Address</h3>                                                   
   </div>
   <div class="box-footer">
     <div class="pull-right">                                                    
        <button type="submit" class="btn btn-primary">
            Shipping Method &nbsp; <i class="icon-chevron-right"></i>
        </button>
     </div>
   </div>                   
</div> ....

In tab1 by clicking onto the button it should switch to tab2 and so on. Kindly help. Thanks in advance

Answer 1

You are looking for something like this

$('#tab1').click(function(){

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

})