使用JQuery激活Bootstrap选项卡

Question

我有以下代码

<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');
};

在这种情况下,当页面准备就绪时,第二个选项卡将被激活,但我总是在行中出现JavaScript错误 $('.tab-pane a[href="#' + tab + '"]').tab();

有人可以帮我吗？

Answer 1

应用一个.nav-tabs似乎正在工作的选择器:请参阅此演示.

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

我更喜欢@codedme的答案,因为如果你知道在页面加载之前你想要哪个标签,你应该更改页面html而不是使用JS来完成这个特定的任务.

我也调整了他的答案的演示.

(如果这不适合您,请指定您的设置 - 浏览器,环境等)

Answer 2

每当页面准备就绪时,单击链接到选项卡锚点即可

$('a[href="' + window.location.hash + '"]').trigger('click');

或者在vanilla JavaScript中

document.querySelector('a[href="' + window.location.hash + '"]').click();

Answer 3

这个从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')

Answer 4

<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添加活动类,淡入类对于平滑过渡是有用的.

Answer 5

将id属性添加到html标签

<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');