Twitter bootstrap 3 установка активной вкладки в js не работает

Да, так об этом спрашивали около 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');

Ответ 1

Первая проблема:

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

#tab ссылается на id="tab", и у вас его нет. Замените #tab на .nav-tabs или добавьте идентификатор в свой ul:

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

Вторая проблема заключается в том, что вы забыли удалить : рядом с a:

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

Это должно быть:

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

Ответ 2

У вас есть : в вашем селекторе, измените его на

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

вместо

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