Jlorenz1 Jlorenz1 -4 years ago 57
HTML Question

Next tab shows content but tabs don't follow

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download