Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Bootstrap tab (tab) plug-in

May 04, 2021 Bootstrap

Table of contents

1. Bootstrap Tab plug-in

2. Usage

3. Fade in and out effect

4. Method

5. Event

Bootstrap Tab plug-in

Tabs are described in Bootstrap Navigation Elements. B y combining some data properties, you can easily create a tab interface. This plug-in allows you to place content on tabs or capsule tabs or even drop-down menu tabs.

Bootstrap tab (tab) plug-in If you want to refer to the functionality of the plug-in separately, you need to refer .js. Or, as mentioned in the Bootstrap plug-in overview chapter, you can refer to bootstrap.js or the compressed version of Bootstrap.min .js.

Usage

You can enable tabs in two ways:

  • Via the data property: You need to add data-toggle"tab" or data-toggle"pill" to the anchor text link.

    Adding nav and nav-tabs classes to ul will apply the Bootstrap label style, adding nav and nav-pills classes to ul, and Bootstrap capsule styles will be applied. 

    <ul class="nav nav-tabs">
   <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>

  • JavaScript: You can use Javscript to enable tabs, as follows: 

    $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')})

    The following example demonstrates how to activate individual tabs in different ways: 

    // 通过名称选取标签页$('#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 in and out effect

If you need to set a fade-in effect for tabs, add .fade to each .tab-pane. The first tab must add a .in class to fade in to display the initial content, as shown in the following example: 

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

Instance

The following example demonstrates the tab plug-in using the data property and its fade-in effect: 

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 标签页（Tab）插件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——从W3Cschool开始。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，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>

The result is as follows:

Bootstrap tab (tab) plug-in

Method

.$(.tab): This method activates tab elements and content containers. The tab needs to use a data-target or a href that points to the container node in the DOM. 

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

Instance

The following example demonstrates the use of the tab plug-in method .tab. In this example, the second tab, iOS, is active: 

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 标签页（Tab）插件方法</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——从W3Cschool开始。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，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>

The result is as follows:

Bootstrap tab (tab) plug-in

Event

The following table lists the events to use in the Tab plug-in. These events can be used as hooks in functions.

event describe Example
show.bs.tab The event is triggered at the tab display, but must be displayed before the new tab page is displayed.Use event.target with event.relatedTarget To locate the activated tab and the previous activated tab. 
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页})
shown.bs.tab The event is triggered when the tab is displayed, but must have been displayed on a tab page.Use event.target with event.relatedTarget To locate the activated tab and the previous activated tab. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页})

Instance

The following example demonstrates the use of tab plug-in events. In this example, the current and previously visited tabs are displayed: 

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 标签页（Tab）插件事件</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></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技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——从W3Cschool开始。</p>
   </div>
   <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，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>

The result is as follows:

Bootstrap tab (tab) plug-in

Related

Where can i find a bootstrap login form?

Bootstrap font icon

What is a bootstrap component?

What is the difference between bootstrap 3 and bootstrap 4?

How to create a social login bootstrap button for twitter?

Introduction to Bootstrap

Bootstrap Pictures

Bootstrap navigation bar

Bootstrap Fold plug-in

Bootstrap drop-down menu (Dropdown) plug-in