使用JQuery激活引导选项卡
Bootstrap tab activation with JQuery
我有以下代码:
<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>
以及以下脚本:
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
在这种情况下,当页面准备好时,第二个选项卡将被激活,但我总是在$('.tab-pane a[href="#' + tab + '"]').tab();
行中收到JavaScript错误
有人能帮我吗?
从.nav-tabs
应用选择器似乎正在工作:请参阅此演示。
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
我更喜欢@codedme的答案,因为如果你在页面加载之前知道你想要哪个选项卡,你可能应该更改页面html,而不是在这个特定的任务中使用JS。
我也为他的答案调整了演示。
(如果这对您不起作用,请指定您的设置-浏览器、环境等)
只要页面准备就绪,即,就点击选项卡锚点的链接
$('a[href="' + window.location.hash + '"]').trigger('click');
或者是普通的JavaScript
document.querySelector('a[href="' + window.location.hash + '"]').click();
这是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')
向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>
然后使用JQuery
$("#tab_aaa").tab('show');
<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>
将活动类添加到您希望在页面加载后处于活动状态的任何li元素中。此外,还需要将活动类添加到内容div中,淡入类对于平滑过渡非常有用。
刚刚经历了这一切,我将解释我的情况。
我在引导模式中有我的选项卡,并在加载时设置以下内容(在触发模式之前):
$('#subMenu li:first-child a').tab('show');
选择选项卡时,实际窗格不可见。因此,您还需要将active
类添加到窗格中:
$('#profile').addClass('active');
在我的例子中,窗格有#profile
(但这很容易是.pane:first-child
),然后显示正确的窗格。
在引导程序5.1.3上运行良好。
$('#nav-profile-tab').click();
为什么不先选择活动选项卡,然后激活所选选项卡内容
1.将类"active"添加到<li>元素
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');
}
}
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- JQuery覆盖不更改单选选项
- jQuery动态表单显示在select选项上
- Jquery:如何获取所选选项全文(带空格)
- 使用基于文本的 Jquery 选择选项
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 阻止选项卡缓存jquery ui
- 使用Jquery增加选项卡
- 如何在jquery.easytabs.js中获取当前选项卡
- JQuery-停止手风琴链接关闭所有选项卡
- 设置所选选项JQuery
- 防止已选择的选项 Jquery 使用 MYSQL 自动完成
- 动态替换下拉菜单选项jQuery
- 在Chrome和Firefox中选择选项jquery 2.1.1时出错
- 附加逗号分隔的值以选择选项 jQuery
- 忽略选择选项jQuery的值
- 无法在回调时配置选项(jQuery插件)
- 为什么这个自动选择第一个选项jquery脚本在Internet Explorer中不起作用