jQuery打开多个标签页面

1、新建html文档。

2、书写hmtl代码。

<div class="content">

<div class="container">

<h3 class="page-header">使用标签页打开页面模式，允许多开</h3>

<div class="">

 <div class="row-fluid">

  <div class="col-md-2" style="padding-left: 0px;">

   <div class="well menuSideBar" style="padding: 8px 0px;">

    <ul class="nav nav-list" id="menuSideBar">

     <li class="nav-header">导航菜单</li>

     <li class="nav-divider"></li>

     <li mid="tab1" funurl="html.html"><a tabindex="-1" href="#">页面1</a></li>

     <li mid="tab2" funurl="html2.html"><a tabindex="-1" href="#">页面2</a></li>

     <li mid="tab3" funurl="html3.html"><a tabindex="-1" href="#">页面3</a></li>

    </ul>

   </div>

  </div>

  <div class="col-md-10" id="mainFrameTabs" style="padding : 0px;">

   <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active noclose"><a href="#bTabs_navTabsMainPage" data-toggle="tab">首页</a></li>

   </ul>

   <div class="tab-content">

    <div class="tab-pane active" id="bTabs_navTabsMainPage">

     <div class="page-header">

      <h2 style="font-size: 31.5px;text-align: center;font-weight: normal;">欢迎使用</h2>

     </div>

     <div style="text-align: center;font-size: 20px;line-height: 20px;"> Welcomgin! </div>

    </div>

   </div>

  </div>

 </div>

</div>

3、书写css代码。

<style>

div.menuSideBar { }

div.menuSideBar li.nav-header { font-size: 14px; padding: 3px 15px; }

div.menuSideBar .nav-list > li > a, div.menuSideBar .dropdown-menu li a { -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; }

</style>

4、书写并添加js代码。

<script src="js/jquery.min.js"></script> 

<script src="js/bootstrap.min.js"></script> 

<script src="js/b.tabs.js" ></script> 

<script src="js/demo.js" ></script>

5、代码整体结构。

6、查看效果。