引导式可切换选项卡，没有选项卡链接

本文介绍了引导式可切换选项卡，没有选项卡链接的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

是否可以执行以下操作

<!-- 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中工作的演示

或者，您可以自己处理整个事情. .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"); });