twitter bootstrap 3在js中设置活动选项卡不起作用 [英] twitter bootstrap 3 setting active tab in js not working

问题描述

是的，所以这已被问了大约1000次，但我尝试了答案，似乎没有一个对我有用。

Yeah, so this has been asked about 1000 times, but I tried the answers and none seem to be working for me.

以下是我的标签：

<ul class="nav nav-tabs">
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#account" data-toggle="tab">Account</a></li>
    <li><a href="#security" data-toggle="tab">Security</a></li>
    <li><a href="#recruiting" data-toggle="tab">Recruiting</a></li>
</ul>

注意，默认情况下，没有设置为活动状态。选项卡窗格：

Note, none are set to active by default. The tab panes:

<div class="tab-content">
    <div class="tab-pane fade" id="account">
        Account
    </div>
    <div class="tab-pane fade" id="security">
        Security
    </div>
    ...more...
</div>

在我的js中，我按照bootstrap文档执行此操作：

In my js, I am doing this per the bootstrap docs:

$(window).load(function () {
        $('#tab a:first').tab('show');
    });

什么都没有显示。我想要做的是让它默认打开第一个标签，但根据我传入的一些数据，我想在需要时调用它：

Nothing shows. What I am trying to do is have it default open the first tab, but depending on some data I pass in I would like to call this if needed:

$('#tab a:[href="#security"]').tab('show');

推荐答案

第一个问题在于：

$('#tab a:first').tab('show')

#tab 引用 id =tab，你没有。将 #tab 替换为 .nav-tabs 或为您的ul添加ID：

#tab makes reference to an id="tab", and you don't have one. Replace #tab with .nav-tabs or add an ID to your ul:

$('.nav-tabs a:first').tab('show')

您的第二个问题是您忘记删除 a旁边的： ：

Your second problem is that you forgot to remove the : next to the a:

$('.nav-tabs a:[href="#security"]').tab('show')

应该是：

$('.nav-tabs a[href="#security"]').tab('show')

这篇关于twitter bootstrap 3在js中设置活动选项卡不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！