Question

我希望自定义功能，以便在单击“下一步”按钮时切换选项卡，我做了类似这样的事情，这段代码将活动类添加到＆＃34; li＆＃34;但不显示该选项卡下的数据。我怎么能这样做？

＆＃13;

function goNextTab(currtab,nexttab)
{   
    
    var curr = $('li.active');
    
    curr.removeClass('active');
    curr.next().addClass('active');
    
        
    $('#'+currtab).attr('aria-expanded', 'false');
    $('#'+nexttab).attr('aria-expanded', 'true');
    
 }

＆＃13;

<ul id="myTab" role="tablist" class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#customer" aria-controls="customer" role="tab" data-toggle="tab">Customer</a>
  </li>
  <li role="presentation">
<a data-toggle="tab" role="tab" aria-controls="job" href="#job" aria-expanded="true">Job</a>
  </li>

  <li role="presentation"><a href="#schedule" aria-controls="schedule" role="tab" data-toggle="tab">Schedule</a>
  </li>                              
</ul>                 
<!-- Tab panes-->
<div class="tab-content">
  
   <div id="customer" role="tabpanel" class="tab-pane active">    

 <button onclick="goNextTab('customer','job')" type="button"> Next</button>
     
 </div>

  <div id="job" role="tabpanel" class="tab-pane">

  <button onclick="goNextTab('job','schedule')" type="schedule"> Next

    </div>
  
  <div id="schedule" role="tabpanel" class="tab-pane">
    
   </div>

</div>

＆＃13;

Answer 1

我就这样做了：

curr.removeClass('active');
if (curr.is("li:last")) {
    $("li:first-child").addClass('active');
} else {
    curr.next().addClass('active');
}

查看the JSFiddle here

Answer 2

   1.Remove onclick functions onclick="goNextTab('customer','job')"

   2.Bootstrap will automatically takes from href

   3. href id and div id should be same

希望我的作品..

Answer 3

我建议使用：

$("#tabYouSwitchTo").tab('show');

这里是一个示例：

http://bl.ocks.org/kiranml1/6956013

使用自定义javascript函数切换简单Tab

3 个答案: