2012-04-24 22 views
6

クリックするとタブがうまく動作しますが、ウィンドウの読み込み時にデフォルトタブを選択すると失敗します。 javascriptは実行されますが、エラーはありませんが、何も起こりません。何か案は?Twitter Bootstrap Toggleableタブでデフォルトを設定できません

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

答えて

10

あなたの選択が間違っている、この代わりのようにそれを試してみてください。

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

デモ:http://jsfiddle.net/TjjKE/

+0

非常にいいです!私は$(window).loadを使用することはできませんでしたが、window.onloadはヒントの残りの部分と一緒に使えました。ありがとう。 –

9

あなたはまた、単に<li class="active"><a href="#whatever">....</a></li>するなど積極的かつ、適切なタブのデフォルトタブを設定することができます<div id="whatever" class="tab-pane active">..</div>があり、より多くのJSの必要性を排除します。見てくださいthis

関連する問題