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');

})

使用javascript函数导航到另一个选项卡

1 个答案: