下一个标签页显示内容，但标签页不跟随

Question

我有2个表格，两个标签分开。 活动和不活动

假设我点击了活动标签中的下一个按钮。 显示了非活动选项卡的内容，但活动选项卡仍然是活动选项卡。 我想念什么吗？

假设它们对应的ID为#Active和#Inactive。 这是下一个按钮的代码：

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

Answer 1

从您的代码中，我猜您正在使用引导程序选项卡，因此您应该在JS代码中添加click事件，以检测对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>