Следующая вкладка показывает содержимое, но вкладки не соответствуют

Question

У меня есть 2 стола, разделенных двумя вкладками. Активен и неактивен

Предположим, я нажму следующую кнопку на активной вкладке. Содержимое неактивной вкладки показывает, что активная вкладка все еще является активной вкладкой. Я что-то упускаю?

Допустим, что их соответствующие идентификаторы: #Active и #Inactive. Это код следующей кнопки:

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

Answer 1

Из кода я предполагаю, что вы используете bootstrap tabs, так что вы должны добавить click событие в коде JS для обнаружения нажмите на кнопку next и отправить Вам вторая вкладка.

Надеюсь, это поможет.

$('.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>