使用 JQuery 激活引导选项卡

Posted 2023-02-22

【中文标题】使用 JQuery 激活引导选项卡

【英文标题】：Bootstrap tab activation with JQuery

【发布时间】：2013-07-23 17:26:57

【问题描述】：

我有以下代码：

<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 a[href="#' + tab + '"]').tab('show');，对吧？另外，ids can't start with a number.

为什么你不使用 bootstrap.js？只需在你的 html 中包含 boostrap.js

错误是对象不接受这个属性或方法。我页面中的 id 不以数字开头。这是我的错误，它只是一个例子。 Bootstrap.js 包含在页面中

$('.nav-tabs a[href="#' + tab + '"]').tab('show');没用。我用更改的 ID 编辑帖子

【参考方案1】：

刚刚为此苦苦挣扎 - 我会解释一下我的情况。

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

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

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

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

在我的例子中，窗格有 #profile（但这很容易是 .pane:first-child），然后显示正确的窗格。

【参考方案2】：

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

【参考方案3】：

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

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

或者在原生 JavaScript 中

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

【讨论】：

简单的解决方案，直截了当。对于那些可能有问题的人，请将其包装到文档就绪功能中。即$(document).ready(function() $('a[href="' + window.location.hash + '"]').trigger('click'); );

【参考方案4】：

为什么不先选择活动选项卡，然后再激活所选选项卡内容？ 1、先在tab的

元素中添加class 'active'。 2. 然后使用 set 'active' 类来选择 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'); 
         
    

【参考方案5】：

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

【参考方案6】：

从.nav-tabs 应用选择器似乎有效： 见this demo。

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

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

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

我也为他的答案调整了demo。

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

【讨论】：

与引导程序一起使用。在模板中，我添加了所有引导 js（包括 jquery.js）我在这个导入中有什么问题吗？模态面板等其他引导组件工作正常

您的页面有实时版本吗？

对不起 MasterAM 没有任何实时版本。似乎我对 bootstrap.js 有问题。我在我的页面中添加了 jquery.js、bootstrap.js 和 jsf 和 richfaces js。所有对 .tab() 的引用总是返回一个 js 错误

尽量去掉一些部分，直到你得到页面的相关部分。然后，使用页面的较小部分，您应该更容易确定事情不工作的原因。

我更新了您的 jsFiddles，因为自您发布此答案以来引导 URL 已更改。

【参考方案7】：

<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 添加活动类，淡入类对于平滑过渡很有用。

【讨论】：

我需要根据条件激活一个选项卡。加载页面时并非总是选择第一个选项卡

我认为你也应该给内容潜水 active 类。

@MasterAM 是的，你是对的，并且淡化类以实现平滑过渡。已编辑

我将 class="active" 添加到第一个选项卡，但 javascript 错误并没有消失。选项卡采用活动样式，但内容未出现

我编辑了代码，请使用这个。您还需要将活动类添加到内容 div 元素。