załadowaniu nowej strony w zakładkach pomocą Twitter Bootstrap

Question

Hi używam następujący kod do tworzenia kartach układ Korzystanie 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> 

teraz wszystkich kartach muszę inną stronę load.So chcę, aby to zrobić:

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

nie chcę, aby załadować zawartość z tej samej strony w zakładkach, a przede wszystkim nie jest ładowanie kodu nowego page.Please pomoc ..

zmiana:

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

Dodałem skrypt

<script> 

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

Answer 1

Istnieje kilka sposobów, aby to zrobić, ale przed podjęciem decyzji, który z nich korzystać, chciałbym się upewnić, że rzeczywiście chce poskładać swoje pliki jak że. Co powstrzymuje cię przed umieszczeniem zawartości w zakładkach na stronie?

Jeśli nie, dlaczego nie skorzystać z PHP?

Jeśli zdecydujesz się trzymać aktualnego planu, sposób, w jaki osiągnę to, co chcesz zrobić, będzie następować za pośrednictwem jQuery i AJAX.

pierwsze, chcesz się upewnić, że używasz właściwej struktury Bootstrap - zobacz sekcję Tabbable Nav, i twoje zakładki znaczników odpowiadają puste obszary Treść:

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

Następnie użyj jQuery.load wypełnić w tab-panes!

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

Answer 2

Wystarczy wyjąć danych przełączania = "zakładkę"

na przykład: na stronie głównej:

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

Na stronie 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>​ 

Złą rzeczą jest po prostu kilka kopii kodów kart nawigacji