tải trang mới trong các tab sử dụng twitter bootstrap

Question

Hi Tôi đang sử dụng đoạn mã sau để tạo bố trí tab sử dụng twitter bootstrap

<ul class="nav nav-tabs" > 
    <li class="active"><a href="#" data-toggle="tab">Request Audit</a></li> 
    <li><a href="#" data-toggle="tab">status</a></li> 
    <li><a href="#" data-toggle="tab">Settings</a></li> 
    <li><a href="#" data-toggle="tab">Help</a></li> 
</ul> 

bây giờ trong tất cả các tab tôi cần trang khác nhau để load.So tôi muốn làm điều này:

<ul class="nav nav-tabs" > 
     <li class="active"><a href="#" data-toggle="tab">Home</a></li> 
     <li><a href="status.html" data-toggle="tab">status</a></li> 
     <li><a href="settings.html" data-toggle="tab">Settings</a></li> 
     <li><a href="help.html" data-toggle="tab">Help</a></li> 
</ul> 

tôi không muốn để tải nội dung từ cùng một trang trong tất cả các tab trở lên đang không tải giúp đỡ page.Please mới ..

update:

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#audit">Request Audit</a></li> 
    <li><a href="#status">status</a></li> 
    <li><a href="#settings">Settings</a></li> 
    <li><a href="#help">Help</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="audit"> 
    <p>audit</p> 
    </div> 
    <div class="tab-pane" id="status"> 
    <p>status</p> 
    </div> 
    <div class="tab-pane" id="settings"> 
     <p>settings</p> 
    </div> 
    <div class="tab-pane" id="help"> 
     <p>help</p> 
    </div> 
</div> 

Tôi đã thêm kịch bản này

<script> 

    $('#myTab a[href="#status"]').click(function (e) { 
     e.preventDefault(); 
     $(this).tab('show'); 
     $('#status').load('status.html'); 
    }); 
</script> 

Answer 1

Có một số cách để làm điều này, nhưng trước khi quyết định cái nào để sử dụng, tôi muốn chắc chắn rằng bạn thực sự muốn mảnh ra tập tin của bạn như cái đó. Điều gì khiến bạn không chỉ đặt nội dung bên trong các tab trên trang như vậy?

Nếu không, tại sao không sử dụng PHP?

Nếu bạn quyết định gắn bó với gói hiện tại của mình, cách tôi thực hiện những gì bạn đang tìm kiếm sẽ là thông qua jQuery và AJAX.

Trước tiên, bạn muốn chắc chắn rằng bạn đang sử dụng cấu trúc Bootstrap thích hợp - kiểm tra phần Tabbable Nav, và làm cho các tab đánh dấu của bạn tương ứng với trống khu vực nội dung:

 <div class="tabbable" style="margin-bottom: 18px;"> 
      <ul class="nav nav-tabs"> 
      <li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li> 
      <li class=""><a href="#tab2" data-toggle="tab">Status</a></li> 
      <li class=""><a href="#tab3" data-toggle="tab">Settings</a></li> 
      <li class=""><a href="#tab4" data-toggle="tab">Help</a></li> 
      </ul> 
      <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;"> 
      <div class="tab-pane active" id="tab1"> 
       <p>Placeholder 1</p> 
      </div> 
      <div class="tab-pane" id="tab2"> 
       <p>Placeholder 2</p> 
      </div> 
      <div class="tab-pane" id="tab3"> 
       <p>Placeholder 3</p> 
      </div> 
      <div class="tab-pane" id="tab4"> 
       <p>Placeholder</p> 
      </div> 
      </div> 
     </div>​ 

Sau đó, sử jQuery.load để điền trong số tab-panes!

$('#tab2').load('/status.html'); 
$('#tab3').load('/settings.html'); 
$('#tab4').load('/help.html'); 

Answer 2

Chỉ cần loại bỏ các dữ liệu chuyển đổi = "tab"

ví dụ: trên trang chủ:

<ul class="nav nav-tabs" > 
     <li class="active"><a href="#" >Home</a></li> 
     <li><a href="status.html" >status</a></li> 
     <li><a href="settings.html" >Settings</a></li> 
     <li><a href="help.html" >Help</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>Home Page content 1</p> 
    </div> 
</div>​ 

Trên trang status.html:

<ul class="nav nav-tabs" > 
     <li ><a href="#" >Home</a></li> 
     <li class="active"><a href="status.html" >status</a></li> 
     <li><a href="settings.html" >Settings</a></li> 
     <li><a href="help.html" >Help</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     <p>status content 1</p> 
    </div> 
</div>​ 

Điều xấu là chỉ có một số bản sao của mã tab nav