CODEWITHSUNDEEP
javascriptjquery
Muhammad Shahzad
Muhammad Shahzad

Reputation: 9652

Simple Tab switching using custom javascript function

I want to custom function too for switch between tabs when clicked on Next button, I did something like this,this code add the active class into "li" but not show the data under that tab. How I can 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>

Upvotes: 4

Views: 1690

Answers (3)

Benny Tal
Benny Tal

Reputation: 1

I suggest to use this:

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

Here is an example:

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

Upvotes: 0

Ahs N
Ahs N

Reputation: 8386

This is how I did it:

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

Have a look at the JSFiddle here

Upvotes: 3

Prabhagaran
Prabhagaran

Reputation: 3700

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

   2.Bootstrap will automatically takes from href

   3. href id and div id should be same

Hope i works..

Upvotes: 0

Related Questions