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

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

Account

Security

...more...

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

Accepted Answer

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

twitter bootstrap 3 setting active tab in js not working

Solution

Problem