Simple Tab toggle using javascript custom function

Question

I want to configure a user-defined function to switch between tabs when I click Next, I did something like this, this code adds the active class to "li", but does not display the data under this tab. How can i do this?

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>
  

Run codeHide result

Answer 1

Here is how I did it:

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

Look here JSFiddle

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

I hope that I work.

Answer 3

I suggest using this:

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

Here is an example:

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