使用JQuery激活Bootstrap选项卡 [英] 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');
};

在这种情况下，当页面准备就绪时，第二个选项卡将被激活，但我总是得到一个JavaScript错误在行 $（'。tab-pane a [href =＃'+ tab +']'）。tab（）;

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

有人可以帮我吗？

推荐答案

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

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

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

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

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.

我调整了演示也是如此。

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

(If this is not working for you, please specify your setting - browser, environment, etc.)

这篇关于使用JQuery激活Bootstrap选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！