引导式可切换选项卡,没有选项卡链接 [英] Bootstrap toggleable tabs without having tab links
问题描述
是否可以执行以下操作
<!-- 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
的选项卡窗格,但是我不希望它具有作为选项卡的链接,但是我希望它可以被其他事件触发
so there is another tab pane called #extra
, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
由于bootstraps tabs.js通过触发链接而不是窗格本身上的tab('show')
起作用,如何在不处理选项卡的情况下触发选项卡窗格?
as bootstrap tabs.js works from trigger a tab('show')
on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
注意:我知道它的基本操作是在选项卡窗格上执行show()和hide(),但是我觉得手动完成所有这些操作使我无法使用回调等.
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
推荐答案
您可以添加其他选项卡,然后将其隐藏
You could add the tab for extras and then just hide it
将此添加到您的nav-tabs
:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
然后使用JavaScript从其他地方激活:
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
在jsFiddle中工作的演示</a>
或者,您可以自己处理整个事情. .tab('show')
唯一要做的是从所有其他nav-tabs
和tab-content
元素中删除活动类.然后在适当的元素上添加.active
类.
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show')
does is remove the active class from all the other nav-tabs
and tab-content
elements. And then add back the .active
class on the appropriate elements.
因此,首先删除所有活动元素,然后重新添加活动类:
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
这篇关于引导式可切换选项卡,没有选项卡链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!