11

こんにちは、次のコードを使用して、twitter ブートストラップを使用してタブ付きレイアウトを作成しています

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

今、すべてのタブで、ロードする別のページが必要です。だから私はこれをしたい:

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

すべてのタブで同じページからコンテンツをロードしたくありません。上記のコードは新しいページをロードしていません。助けてください..

アップデート ：

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

このスクリプトを追加しました

<script>  

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

2 に答える 2

22

これを行うにはいくつかの方法がありますが、どの方法を使用するかを決定する前に、実際にファイルをそのように分割したいのかを確認したいと思います. ページのタブ内にコンテンツをそのまま配置することを妨げているのは何ですか?

そうでない場合は、なぜ PHP を使用しないのでしょうか?

あなたが現在の計画に固執することにした場合、あなたがしようとしていることを達成する方法は、jQuery と AJAX を使用することです。

まず、適切な Bootstrap 構造を使用していることを確認する必要があります。Tabbable Navセクションを確認し、マークアップ タブが空のコンテンツ領域に対応するようにします。

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

次に、jQuery.loadを使用してtab-panes!

$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
于 2012-09-16T17:53:12.323 に答える
5

data-toggle="tab"を削除するだけです

例: ホームページ:

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

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

悪い点は、nav-tab コードのコピーをいくつか持っていることです。

于 2015-09-26T05:10:38.077 に答える