有没有办法做到以下几点
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
所以还有另一个名为#extra
的选项卡 Pane ,但我不希望它有一个链接作为选项卡,但我确实希望它可以通过其他一些事件进行切换
由于 bootstrap tabs.js 的工作原理是在链接上触发 tab('show')
而不是在 Pane 本身上,因此如何在不处理选项卡的情况下触发选项卡 Pane ?
注意:我知道它的基本操作是在选项卡 Pane 上执行 show() 和 hide(),但我觉得手动执行所有这些操作会阻止我使用回调等
最佳答案
您可以添加附加选项卡,然后将其隐藏
将此添加到您的导航选项卡
:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
然后使用 JavaScript 从其他地方激活:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
<小时/>或者,您也可以自己处理整个事情。 .tab('show')
唯一做的就是从所有其他 nav-tabs
和 tab-content
元素中删除事件类。然后在适当的元素上添加回 .active
类。
因此,首先删除所有事件元素,然后添加回事件类:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
关于javascript - Bootstrap 可切换选项卡,无需选项卡链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25699332/