92

我有以下代码：

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

任何人都可以帮助我吗？

4

7 回答 7

196

从 应用选择器.nav-tabs似乎有效：请参阅此演示。

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

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

我更喜欢@codedme 的答案，因为如果您在页面加载之前知道要使用哪个选项卡，您可能应该更改页面 html，而不是使用 JS 来执行此特定任务。

我也为他的答案调整了演示。

（如果这不适合您，请指定您的设置 - 浏览器、环境等）

于 2013-07-24T10:30:42.567 回答
26

每当页面准备就绪时，单击指向选项卡锚点的链接，即

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

或者在原生 JavaScript 中

document.querySelector('a[href="' + window.location.hash + '"]').click();
于 2013-11-10T09:31:13.640 回答
23

这个从 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')
于 2017-05-03T19:07:48.170 回答
11 
<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 添加活动类，淡入类对于平滑过渡很有用。

于 2013-07-24T10:21:04.253 回答
10

将 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');
于 2018-08-09T09:52:48.983 回答
3

刚刚为此苦苦挣扎-我将解释我的情况。

我在引导模式中有我的选项卡，并在加载时设置以下内容（在触发模式之前）：

$('#subMenu li:first-child a').tab('show');

在选择选项卡时，实际窗格不可见。因此，您还需要将active类添加到窗格中：

$('#profile').addClass('active');

在我的情况下，窗格具有#profile（但这可能很容易.pane:first-child），然后显示正确的窗格。

于 2019-11-13T10:48:23.203 回答
0

为什么不先选择活动选项卡然后激活所选选项卡内容？
1. 将class 'active' 添加到tab first 的<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'); 
        } 
    }
于 2017-11-16T09:26:34.387 回答