twitter bootstrap 3 setting active tab in js not working

Question

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

Here are my tabs:

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

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

Answer 1

The first problem is here:

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

#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')

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

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

It should be:

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

Answer 2

You have : in your selector, Change it to

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

instead of

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