javascript - 使用 twitter bootstrap 在选项卡中加载新页面

Question

您好，我正在使用以下代码通过 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>

现在在所有选项卡中我需要加载不同的页面。所以我想这样做:

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

Answer 1

有多种方法可以做到这一点，但在决定使用哪一种之前，我想确保您确实想要像那样拼凑文件。是什么阻止您将内容原封不动地放在页面上的选项卡中？

如果没有，为什么不使用 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');