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>

回答1:

Your selector is wrong, try it like this instead:

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

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

回答2:

You can also set a default tab as active by just <li class="active"><a href="#whatever">....</a></li> and then on the appropriate tab have <div id="whatever" class="tab-pane active">..</div> and eliminate the need for more JS. have a look at this

来源：https://stackoverflow.com/questions/10304245/cant-set-default-in-twitter-bootstrap-toggleable-tab

标签

javascript

tabs

twitter-bootstrap

nav