twitter bootstrap 3在js中设置活动选项卡不起作用

Question

是的,所以这已被问了大约1000次,但我尝试了答案,似乎没有人为我工作.

这是我的标签:

<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>

注意,默认情况下,没有设置为活动.选项卡窗格:

<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文档执行此操作:

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

没有任何表现.我想要做的是让它默认打开第一个标签,但根据我传入的一些数据,我想在需要时调用它:

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

Answer 1

第一个问题在这里:

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

#tab引用一个id="tab",你没有.更换#tab用.nav-tabs或添加ID到您的UL:

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

你的第二个问题是你忘了删除:旁边的a:

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

它应该是:

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

Answer 2

您有:选择器,将其更改为

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

代替

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