javascript - 使用自定义 javascript 函数的简单选项卡切换

Question

我也想自定义功能，以便在单击“下一步”按钮时在选项卡之间切换， 我做了这样的事情，这段代码将事件类添加到“li”中但不显示该选项卡下的数据。 我该怎么做？

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

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

Answer 1

我是这样做的:

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

看看the JSFiddle here