使用 JQuery 激活引导选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17830590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap tab activation with JQuery
提问by user2607411
I have the following code
我有以下代码
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
And the following script
以及以下脚本
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
In this case when the page is ready the second tab will be activate but i allways get a JavaScript error in the line $('.tab-pane a[href="#' + tab + '"]').tab();
在这种情况下，当页面准备好时，第二个选项卡将被激活，但我总是在行中收到 JavaScript 错误 $('.tab-pane a[href="#' + tab + '"]').tab();
Can anyone help me please?
有人可以帮我吗？
回答by MasterAM
Applying a selector from the .nav-tabsseems to be working:
See this demo.
应用来自 的选择器.nav-tabs似乎有效：请参阅此演示。
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
I would prefer @codedme's answer, since if you know which tab you want prior to page load, you should probably change the page html and not use JS for this particular task.
我更喜欢@codedme 的答案，因为如果您知道在页面加载之前想要哪个选项卡，您可能应该更改页面 html 并且不要将 JS 用于此特定任务。
I tweaked the demofor his answer, as well.
我也为他的回答调整了演示。
(If this is not working for you, please specify your setting - browser, environment, etc.)
（如果这对您不起作用，请指定您的设置 - 浏览器、环境等）
回答by Kamran Ahmed
Perform a click on the link to the tab anchor whenever the page is ready i.e.
每当页面准备好时，单击指向选项卡锚点的链接，即
$('a[href="' + window.location.hash + '"]').trigger('click');
Or in vanilla JavaScript
或者在香草 JavaScript 中
document.querySelector('a[href="' + window.location.hash + '"]').click();
回答by Amine Boulaajaj
This one is quite straightforward from w3schools: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
这个来自 w3schools 非常简单：https: //www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
回答by codedme
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
<li><a href="#bbb" data-toggle="tab">BBB</a></li>
<li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane fade active in" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>
Add active class to any li element you want to be active after page load. And also adding active class to content div is needed ,fade in classes are useful for a smooth transition.
将活动类添加到您希望在页面加载后处于活动状态的任何 li 元素。并且还需要向内容 div 添加活动类，淡入类对于平滑过渡很有用。
回答by Dmytro Goncharuk
Add an id attribute to a html tag
给 html 标签添加 id 属性
<ul class="nav nav-tabs">
<li><a href="#aaa" data-toggle="tab" id="tab_aaa">AAA</a></li>
<li><a href="#bbb" data-toggle="tab" id="tab_bbb">BBB</a></li>
<li><a href="#ccc" data-toggle="tab" id="tab_ccc">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Then using JQuery
然后使用 JQuery
$("#tab_aaa").tab('show');
回答by Antony
Having just struggled with this - I'll explain my situation.
刚刚为此挣扎 - 我会解释我的情况。
I have my tabs within a bootstrap modal and set the following on load (pre the modal being triggered):
我在引导模式中有我的选项卡，并在加载时设置以下内容（在触发模式之前）：
$('#subMenu li:first-child a').tab('show');
$('#subMenu li:first-child a').tab('show');
Whilst the tab was selected the actual pane wasn't visible. As such you need to add activeclass to the pane as well:
虽然选择了选项卡，但实际窗格不可见。因此，您还需要将active类添加到窗格中：
$('#profile').addClass('active');
$('#profile').addClass('active');
In my case the pane had #profile(but this could have easily been .pane:first-child) which then displayed the correct pane.
在我的情况下，窗格有#profile（但这很容易.pane:first-child），然后显示了正确的窗格。
回答by Kanit P.
why not select active tab first then active the selected tab content ?
1. Add class 'active' to the < li > element of tab first .
2. then use set 'active' class to selected div.
为什么不先选择活动标签，然后再激活选定的标签内容？
1.在tab first的<li>元素中添加类'active'。
2. 然后使用 set 'active' class 到选定的 div。
$(document).ready( function(){
SelectTab(1); //or use other method to set active class to tab
ShowInitialTabContent();
});
function SelectTab(tabindex)
{
$('.nav-tabs li ').removeClass('active');
$('.nav-tabs li').eq(tabindex).addClass('active');
//tabindex start at 0
}
function FindActiveDiv()
{
var DivName = $('.nav-tabs .active a').attr('href');
return DivName;
}
function RemoveFocusNonActive()
{
$('.nav-tabs a').not('.active').blur();
//to > remove :hover :focus;
}
function ShowInitialTabContent()
{
RemoveFocusNonActive();
var DivName = FindActiveDiv();
if (DivName)
{
$(DivName).addClass('active');
}
}
