chargement d'une nouvelle page dans les onglets en utilisant Twitter bootstrap

Salut, je suis en utilisant le code suivant pour créer des onglets de mise en page à l'aide de 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>

maintenant dans tous les onglets, j'ai besoin d'autre page à charger.Je tiens donc à le faire :

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

Je ne veux pas charger le contenu de la page dans tous les onglets et code ci-dessus n'est pas de chargement de la nouvelle page.S'il vous plaît aider..

mise à jour :

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

J'ai ajouté ce script

<script>  

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

source d'informationauteur vishesh

  1. 21

    Il y a plusieurs façons de le faire, mais avant de décider lequel utiliser, je voulez vous assurer que vous avez réellement envie d'œuvre à partir de vos fichiers comme ça. Ce qui vous empêche de simplement mettre le contenu à l'intérieur des onglets sur la page telle qu'elle est?

    Si non, pourquoi ne pas utiliser le PHP?

    Si vous décidez de rester avec votre plan actuel, la façon dont je l'avais accomplir ce que vous cherchez à faire serait grâce à jQuery et AJAX.

    Tout d'abord, vous voulez vous assurer que vous utilisez le bon de Bootstrap structure – découvrez le Tabbable Nav section, et de faire vos onglets de balisage correspondent à vide domaines de contenu:

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

    Ensuite, utilisez jQuery.charge de remplir le tab-panes!

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

    Il suffit de retirer le data-toggle="tab"

    par exemple: sur la Page d'Accueil:

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

    Sur le status.html page:

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

    La mauvaise chose, c'est tout simplement avoir une copie de la valeur liquidative-onglet codes