YouTip

Tabs were introduced in the (#) chapter. By combining some data attributes, you can easily create a tab interface. With this plugin, you can place content in tabs, pill tabs, or even dropdown menu tabs. > !(#)If you want to use this plugin's functionality individually, you need to include **tab.js**. Alternatively, as mentioned in the (#) chapter, you can include _bootstrap.js_ or the minified version _bootstrap.min.js_. ## Usage You can enable tabs in two ways: * **Via data attributes**: You need to add **data-toggle="tab"** or **data-toggle="pill"** to anchor text links. Adding the **nav** and **nav-tabs** classes to a **ul** will apply Bootstrap's (#). Adding the **nav** and **nav-pills** classes to a **ul** will apply Bootstrap's (#).

• Home
...

* **Via JavaScript**: You can enable tabs using JavaScript, as shown below: $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')}) The following example demonstrates activating individual tabs in different ways: // Select tab by name $('#myTab a[href="#profile"]').tab('show') // Select the first tab $('#myTab a:first').tab('show') // Select the last tab $('#MyTab a:last').tab('show') // Select the third tab (0-indexed) $('#myTab li:eq(2) a').tab('show') ## Fade Effect To add a fade effect to tabs, add the **.fade** class to each **.tab-pane**. The first tab pane must also have the **.in** class to fade in the initial content, as shown in the example below: ### Example The following example demonstrates the Bootstrap Tab plugin using data attributes and its fade effect: ## Example

• iOS
• Java
  • jmeter
  • ejb

[Try it »](#) The result is as follows:  ## Methods **.$().tab**: This method activates a tab element and its content container. Tabs require either a **data-target** attribute or an **href** pointing to a container node in the DOM.

• Home
.....

$(function () {$('#myTab a:last').tab('show')}) ### Example The following example demonstrates the usage of the Bootstrap Tab plugin method **.tab**. In this example, the second tab _iOS_ is activated: ## Example

• iOS
• Java
  • jmeter
  • ejb

$(function () { $('#myTab li:eq(1) a').tab('show'); }); [Try it »](#) The result is as follows:  ## Events The table below lists the events used in the Bootstrap Tab plugin. These events can be used as hooks in functions. | Event | Description | Example | | --- | --- | --- | | show.bs.tab | This event fires when a new tab is about to be shown (but before the new tab has been shown). Use **event.target** and **event.relatedTarget** to target the active tab and the previous active tab, respectively. | $('a').on('show.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) | | shown.bs.tab | This event fires after a tab has been shown (after the tab has been completely shown). Use **event.target** and **event.relatedTarget** to target the active tab and the previous active tab, respectively. | $('a').on('shown.bs.tab', function (e) { e.target // newly activated tab e.relatedTarget // previous active tab }) | ### Example The following example demonstrates the usage of Bootstrap Tab plugin events. In this example, the current and previously visited tabs will be displayed: ## Example

---

Active Tab:

Previous Active Tab:

---

• iOS
• Java
  • jmeter
  • ejb

$(function(){ $('a').on('shown.bs.tab', function (e) { // Get the name of the activated tab var activeTab = $(e.target).text(); // Get the name of the previously active tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); [Try it »](#) The result is as follows: