Next tab shows content but tabs don't follow

Question

I have 2 tables separated with two tabs. Active and Inactive

Let's say I click a next button from the active tab. The content of the inactive tab shows but the active tab is still the Active tab. Am I missing something?

Lets say their corresponding IDs are #Active and #Inactive. This is the code of the next button:

<a href=#Inactive data-toggle="tab" aria-expanded="false">
    <button class="btn next">Next</button>
</a>

Answer 1

From your code i guess that you're using bootstrap tabs so you should add click event in your JS code to detect the click on next button and send you to the second tab.

Hope this helps.

$('.next').click(function () {
    $('#myTabs a[href="#inactive"]').tab('show');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class='container'>
  
  <!-- Nav tabs --><br>
  <ul class="nav nav-tabs" id='myTabs' role="tablist">
    <li role="presentation" class="active"><a href="#acitve" aria-controls="acitve" role="tab" data-toggle="tab">Active</a></li>
    <li role="presentation"><a href="#inactive" aria-controls="inactive" role="tab" data-toggle="tab">Inactive</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="acitve">
      table 1 
      </br> 
      <button class="btn next">Next</button>
    </div>
    <div role="tabpanel" class="tab-pane" id="inactive">
      table 2
    </div>
  </div>

</div>