下一个选项卡显示内容,但选项卡不显示内容;不要跟在后面
Next tab shows content but tabs don't follow
我有两个用两个选项卡分隔的表。活动和非活动
假设我单击了活动选项卡中的下一个按钮。显示了非活动选项卡的内容,但活动选项卡仍然是活动选项卡。我是不是遗漏了什么?
假设它们对应的ID为#Active和#Inactive。这是下一个按钮的代码:
<a href=#Inactive data-toggle="tab" aria-expanded="false">
<button class="btn next">Next</button>
</a>
根据您的代码,我猜您正在使用引导选项卡,因此您应该在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>
相关文章:
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 在iPad上,如何通过Javascript事件在选择元素上设置focus()而不显示选项
- Javascript测试-使用Array.prototype以随机顺序显示选项
- 显示选项卡后向上滚动
- 使用 jQuery UI 选择菜单中选择中的隐藏/显示选项
- 无法使用 jquery 显示选项卡内容
- 如何在 angularjs 材料设计中显示选项卡标题中心对齐
- JavaScript 选择列表,循环显示选项
- 我制作了自己的jquery选项卡版本,但我需要外部链接来显示选项卡内容和样式原始导航
- 寻找跨浏览器解决方案来突出显示选项卡
- 请求方法显示选项而不是开机自检
- 如何在“挖空.js”中单击后显示选项默认标题
- 有条件地在带有角度的选择中显示选项
- 如何使用 Twitter Bootstrap 3 显示选项卡内容
- 高图表折线图中的单击并保持突出显示选项
- 火狐扩展 - >获取显示选项卡的内容
- 使用 javascript 在下拉列表中显示选项的键和值
- AngularJS Autocomplete未显示选项
- 我希望根据使用jquery单击的选项卡来显示选项卡内容
- jQuery在页面刷新时选择排序更改显示选项.什么'正在发生