Can't Set Default in Twitter Bootstrap Toggleable Tab

javascript, nav, tabs, twitter-bootstrap

Solution

Your selector is wrong, try it like this instead:

$(window).load(function(){
    $('#tab a[href="#client_tab2"]').tab('show');
});

Demo: http://jsfiddle.net/TjjKE/

Problem

The tabs work nicely when clicked but selecting the default tab on window load fails. The javascript runs, no errors, but nothing happens. Any ideas? ``` <head> <link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" /> </head> <script> //<![CDATA[ window.onload=function () { $('#client_tab2').tab(); }; //]]> </script> <ul class='nav nav-tabs' id='tab'> <li><a href="#client_tab1" data-toggle="tab">General</a></li> <li><a href="#client_tab2" data-toggle="tab">Applications</a></li> <li><a href="#client_tab3" data-toggle="tab">Family</a></li> <li><a href="#client_tab4" data-toggle="tab">Memos</a></li> </ul> <form accept-charset="UTF-8" action="/clients/4512" class="simple_form client tab-content" id="edit_client_4512" method="post" novalidate="novalidate"> <div class='tab-pane active' id='client_tab1'> <legend>General Information</legend> </div> <div class='tab-pane' id='client_tab2'> <legend>Application Information</legend> </div> <div class='tab-pane' id='client_tab3'> <legend>Family</legend> </div> <div class='tab-pane' id='client_tab4'> <legend>Memos</legend> </div> </form> ```

Original source