下一个选项卡显示内容但选项卡不跟随

Question

我有 2 个表格，用两个选项卡隔开。活动和非活动

假设我单击了活动选项卡中的下一步按钮。显示非活动选项卡的内容，但活动选项卡仍然是活动选项卡。我错过了什么吗？

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

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

Answer 1

根据你的代码我猜你正在使用 bootstrap tabs 所以你应该在你的 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>

下一个选项卡显示内容但选项卡不跟随

Next tab shows content but tabs don't follow

html

javascript

jquery

twitter-bootstrap

bootstrap-tabs