使用Twitter的引导

Question

您好我现在用的是下面的代码创建使用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> 

现在

在我需要不同的页面load.So我想这样做的所有的标签在标签加载新的一页：

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

我不希望加载来自同一页面内容中的所有选项卡和上面的代码没有加载新page.Please帮助..

更新：

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

首先，你要确保你使用了正确的引导结构 - 检查出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'); 

Answer 2

只需卸下数据切换= “标签”

例如：在主页上：

<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代码副本