javascript – 使用twitter bootstrap在标签页中加载新页面

嗨,我使用以下代码使用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>

解决方法

有几种方法可以做到这一点,但是在决定使用哪种方法之前,我想确保你真的想把这些文件分解出来.什么让你不要把内容放在页面上的标签内？

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

原文链接：https://www.f2er.com/js/154680.html

javascript – 使用twitter bootstrap在标签页中加载新页面

解决方法

猜你在找的JavaScript相关文章