2012-04-24 35 views
6

Các tab hoạt động tốt khi được nhấp nhưng chọn tab mặc định khi tải cửa sổ không thành công. Javascript chạy, không có lỗi, nhưng không có gì xảy ra. Ý tưởng nào?Không thể đặt mặc định trong Twitter Bootstrap Tab 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> 

Trả lời

10

chọn của bạn là sai, hãy thử nó như thay vì điều này:

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

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

+0

Rất đẹp! Tôi không thể sử dụng $ (cửa sổ) .load nhưng window.onload với phần còn lại của mẹo của bạn hoạt động tuyệt vời! Cảm ơn. –

9

Bạn cũng có thể thiết lập một tab mặc định là hoạt động bằng cách chỉ <li class="active"><a href="#whatever">....</a></li> và sau đó vào tab thích hợp có <div id="whatever" class="tab-pane active">..</div> và loại bỏ nhu cầu cần thêm JS. hãy xem this

Các vấn đề liên quan