使用javascript函數導航到另一個選項卡

Question

朋友，

我已經使用bootstrap創建了選項卡，我正在努力創建此場景。

通過單擊提交按鈕，活動選項卡應切換到另一個選項卡。

<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> .... 

在tab1中通過點擊按鈕它應該切換到tab2等等。請幫助。在此先感謝

Answer 1

您正在尋找的東西像this

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

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

})