Can't Set Default in Twitter Bootstrap Toggleable Tab
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>
Answer
Your selector is wrong, try it like this instead:
$(window).load(function(){
$('#tab a[href="#client_tab2"]').tab('show');
});