使用twitter bootstrap在选项卡中加载新页面 [英] loading new page in tabs using twitter bootstrap

问题描述

我正在使用以下代码使用Twitter引导程序创建选项卡式布局

Hi I am using the following code to create tabbed layout using 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>

现在在所有标签中，我需要加载不同的页面.所以我想这样做:

now in all tabs i need different page to load.So i want to do this :

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

我不想在所有标签中都从同一页面加载内容，并且上面的代码无法加载新页面.请帮助.

I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..

更新:

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

推荐答案

有几种方法可以做到这一点，但是在决定使用哪种方法之前，我要确保您确实想像这样整理文件.是什么让您无法仅将内容按原样放在页面的选项卡内?

There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?

如果没有，为什么不使用PHP?

If not, why not use PHP?

如果您决定坚持当前的计划，那么我将通过jQuery和AJAX来完成您想要的工作.

If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.

首先，您要确保使用正确的Bootstrap结构-检出 Tabbable Nav 部分，然后使您的标记标签对应于空白的内容区域:

First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:

       <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');

这篇关于使用twitter bootstrap在选项卡中加载新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！