Bootstrap 标签页(Tab)插件

标签页(Tab)在 Bootstrap 导航元素 一章中介绍过。经过结合一些 data 特点,您能够轻松地创立一个标签页界面。经过这个插件您能够把内容放置在标签页或许是胶囊式标签页乃至是下拉菜单标签页中。

假如您想要独自引证该插件的功用,那么您需求引证 tab.js。或许,正如 Bootstrap 插件概览 一章中所说到,您能够引证 bootstrap.js 或压缩版的 bootstrap.min.js

用法

您能够经过以下两种办法启用标签页:

  • 经过 data 特点:您需求增加 data-toggle="tab"data-toggle="pill" 到锚文本链接中。

    增加 navnav-tabs 类到 ul 中,将会运用 Bootstrap 标签款式,增加 navnav-pills 类到 ul 中,将会运用 Bootstrap 胶囊式款式

    <ul class="nav nav-tabs">
       <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
    </ul>
    
  • 经过 JavaScript:您能够运用 Javscript 来启用标签页,如下所示:
    $('#myTab a').click(function (e) {
      e.preventDefault()
      $(this).tab('show')
    })
    

    下面的实例演示了以不同的办法来激活各个标签页:

    // 经过称号选取标签页
    $('#myTab a[href="#profile"]').tab('show')
     
    // 选取第一个标签页
    $('#myTab a:first').tab('show') 
    
    // 选取最终一个标签页
    $('#myTab a:last').tab('show') 
    
    // 选取第三个标签页(从 0 开端索引)
    $('#myTab li:eq(2) a').tab('show') 
    

淡入淡出作用

假如需求为标签页设置淡入淡出作用,请增加 .fade 到每个 .tab-pane 后边。第一个标签页有必要增加 .in 类,以便淡入显现初始内容,如下面实例所示:

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="svn">...</div>
  <div class="tab-pane fade" id="ios">...</div>
  <div class="tab-pane fade" id="java">...</div>
</div>

实例

下面的实例演示了运用 data 特点的标签页(Tab)插件及其淡入淡出的作用:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页(Tab)插件</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active">
      <a href="#home" data-toggle="tab">
         W3Cschool Home
      </a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java 
         <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolw3cschool学习教程是一个供给最新的web技能站点,本站免费供给了建站相关的技能文档,协助广阔web技能爱好者快速入门并树立自己的网站。菜鸟先飞早入行——学的不仅是技能,更是愿望。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作体系。开端是于 2007 年初次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X,它们同享 Darwin 根底。OS X 操作体系是用在苹果manbet上,iOS 是苹果的移动版别。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测验软件。它是 100% 纯 Java 运用程序,用于负载和功能测验。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans(EJB)是一个创立高度可扩展性和强壮企业级运用程序的开发架构,布置在兼容运用程序服务器(比方 JBOSS、Web Logic 等)的 J2EE 上。
      </p>
   </div>
</div>

</body>
</html>

成果如下所示:

标签页(Tab)插件

办法

.$().tab:该办法能够激活标签页元素和内容容器。标签页需求用一个 data-target 或许一个指向 DOM 中容器节点的 href

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
  .....
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  .....
</div>
<script>
  $(function () {
    $('#myTab a:last').tab('show')
  })
</script>

实例

下面的实例演示了标签页(Tab)插件办法 .tab 的用法。在本实例中,第二个标签页 iOS 是激活的:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页(Tab)插件办法</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a>
   </li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">Java <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
            jmeter</a>
         </li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">
            ejb</a>
         </li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolw3cschool学习教程是一个供给最新的web技能站点,本站免费供给了建站相关的技能文档,协助广阔web技能爱好者快速入门并树立自己的网站。菜鸟先飞早入行——学的不仅是技能,更是愿望。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作体系。开端是于 2007 年初次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X,它们同享 Darwin 根底。OS X 操作体系是用在苹果manbet上,iOS 是苹果的移动版别。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测验软件。它是 100% 纯 Java 运用程序,用于负载和功能测验。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans(EJB)是一个创立高度可扩展性和强壮企业级运用程序的开发架构,布置在兼容运用程序服务器(比方 JBOSS、Web Logic 等)的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function () {
      $('#myTab li:eq(1) a').tab('show');
   });
</script>

</body>
</html>

成果如下所示:

标签页(Tab)插件办法

事情

下表列出了标签页(Tab)插件中要用到的事情。这些事情可在函数中当钩子运用。

事情描绘实例
show.bs.tab该事情在标签页显现时触发,可是有必要在新标签页被显现之前。别离运用 event.targetevent.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})
shown.bs.tab该事情在标签页显现时触发,可是有必要在某个标签页现已显现之后。别离运用 event.targetevent.relatedTarget 来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

实例

下面的实例演示了标签页(Tab)插件事情的用法。在本实例中,将显现当时和前一个访问过的标签页:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 标签页(Tab)插件事情</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<hr>
   <p class="active-tab"><strong>激活的标签页</strong>:<span></span></p>
   <p class="previous-tab"><strong>前一个激活的标签页</strong>:<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
   <li class="active"><a href="#home" data-toggle="tab">
      W3Cschool Home</a></li>
   <li><a href="#ios" data-toggle="tab">iOS</a></li>
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" 
         data-toggle="dropdown">
         Java <b class="caret"></b></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
         <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
         <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
      </ul>
   </li>
</ul>
<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="home">
      <p>W3Cschooolw3cschool学习教程是一个供给最新的web技能站点,本站免费供给了建站相关的技能文档,协助广阔web技能爱好者快速入门并树立自己的网站。菜鸟先飞早入行——学的不仅是技能,更是愿望。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作体系。开端是于 2007 年初次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X,它们同享 Darwin 根底。OS X 操作体系是用在苹果manbet上,iOS 是苹果的移动版别。</p>
   </div>
   <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测验软件。它是 100% 纯 Java 运用程序,用于负载和功能测验。</p>
   </div>
   <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans(EJB)是一个创立高度可扩展性和强壮企业级运用程序的开发架构,布置在兼容运用程序服务器(比方 JBOSS、Web Logic 等)的 J2EE 上。
      </p>
   </div>
</div>
<script>
   $(function(){
      $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      // 获取已激活的标签页的称号
      var activeTab = $(e.target).text(); 
      // 获取前一个激活的标签页的称号
      var previousTab = $(e.relatedTarget).text(); 
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
   });
});
</script>

</body>
</html>

成果如下所示:

标签页(Tab)插件事情