Bootstrap Tab Plugin

Tabs (Tab) inBootstrap Navigation ElementsWe introduced this in the chapter. By combining some data attributes, you can easily create a tabbed interface. With this plugin, you can place content in tabs, pill-style tabs, or even dropdown menu tabs.

If you want to reference the functionality of this plugin separately, you need to referencetab.js. Or, asBootstrap Plugins Overviewmentioned in the chapter, you can referencebootstrap.jsor the compressed version ofbootstrap.min.js。

Usage

You can enable tabs in the following two ways:

• Via the data attribute: you need to adddata-toggle="tab"ordata-toggle="pill"to the anchor text link.

  Addnavandnav-tabsclass toulin, will apply Bootstraptab styles, addnavandnav-pillsclass toulin, will apply Bootstrappill styles。

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

• Via JavaScript: you can use JavaScript to enable tabs, as shown below:

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

  The following example demonstrates activating each tab in different ways:

  // 通过名称选取标签页
  $('#myTab a[href="../index.html"]').tab('show')
  
  // 选取第一个标签页
  $('#myTab a:first').tab('show')
  
  // 选取最后一个标签页
  $('#myTab a:last').tab('show')
  
  // 选取第三个标签页（从 0 开始索引）
  $('#myTab li:eq(2) a').tab('show')
  

Fade effect

If you need to add a fade effect to tabs, please add.fadeto each.tab-paneafter. The first tab must add.inclass so that the initial content fades in, as shown in the example below:

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

Example

The following example demonstrates the Tab plugin using data attributes and its fade effect:

The result is shown below:

Methods

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="../index.html" 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>

Example

The following example demonstrates the Tab plugin's methods.tabusage. In this example, the second tabiOSis activated:

The result is as follows:

Events

The following table lists the events used in the Tab plugin. These events can be used as hooks in functions.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

Example

The following example demonstrates the usage of the Tab plugin events. In this example, the current and previously visited tabs will be displayed:

The result is as follows: