WEB小结(3)——BookStrap中标签页中载入别的网页

     BookStrap是github上开源的前段设计框架，比较适合初学者使用，地址:http://www.bootcss.com/，其中有中文文档可以参考。

BookStrap中标签页的形式如下：

    <ul class="nav nav-pills" id="myTabs">
  <li role="presentation" class="active"><a href="#start" aria-controls="test1" role="tab" data-toggle="tab" id="test1" class="h3">1</a></li>
  <li role="presentation"><a href="#test2" aria-controls="test2" role="tab" data-toggle="tab"  class="h3">2</a></li>
  <li role="presentation"><a href="#test3" aria-controls="test3" role="tab" data-toggle="tab"  class="h3">3</a></li>
  <li role="presentation"><a href="#test4" class="h3" aria-controls="test4" role="tab" data-toggle="tab">4</a></li>
</ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="test1" >1的内容</div>
    <div role="tabpanel" class="tab-pane fade" id="test2">2的内容</div>
    <div role="tabpanel" class="tab-pane fade" id="test3">的内容</div>
    <div role="tabpanel" class="tab-pane fade h3" id="test4" >4的内容</div>
  </div>
    

    其中上半部分为各个标签页的名称，下半部分为各个标签页的链接（指向什么元素）
      

     在我们使用标签页的时候，一般都值需要标签页指向文字内容即可，就像如上面即可，但是我们会遇到这种情况：我们希望一个标签显示为

一个网页的内容，我们把网页放在同上述网页一个文件夹中并引用这个网页，相当于一个网页一个元素，即1标签页显示test1.html内容，2标签

页显示test2.html内容。

解决方法:

     添加jquery/js代码：

 <script type="text/javascript">
        $(document).ready(function() {
               $('#test1').load('test1.html');
               $('#test2').load('test2.html');
               $('#test3').load('test3.html');     
               $('#test4').load('test4.html');
            });
    </script>

    

关键点：

      通过使用load函数使链接指向元素在页面初始化时加载响应的页面。

注意点：

      1、使用一次load函数即可，多次使用会导致页面填的页面不会保存

      2、设置好本页面和加载的页面元素id的冲突，因为加载时会把要加载元素的内容和js代码等全部拷贝过来。