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

请注意，默认情况下没有设置为事件状态。选项卡 Pane :

<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 或向您的 ul 添加 ID:

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

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

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

应该是:

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