11

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

不好的是只有一些导航标签代码的副本

于 2015-09-26T05:10:38.077 回答