我有 2 个表,用两个选项卡分隔。活跃和不活跃
假设我从活动选项卡中单击下一个按钮。显示非活动选项卡的内容,但活动选项卡仍然是活动选项卡。我错过了什么吗?
假设它们对应的 ID 是#Active 和#Inactive。这是下一个按钮的代码:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>
我有 2 个表,用两个选项卡分隔。活跃和不活跃
假设我从活动选项卡中单击下一个按钮。显示非活动选项卡的内容,但活动选项卡仍然是活动选项卡。我错过了什么吗?
假设它们对应的 ID 是#Active 和#Inactive。这是下一个按钮的代码:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>
从您的代码中,我猜您正在使用引导选项卡,因此您应该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>