YouTip

Tabs have already been introduced in the (#) chapter. In this chapter, we will create a tabbed interface using data attributes. ## Usage You can enable tabbed navigation in two ways: * **Via data attributes:** You can add **data-toggle="tab"** or **data-toggle="pill"** to anchor text links. Add the **nav** and **nav-tabs** classes to the ul.

• Home
...

* **Via JavaScript:** You can enable tabs via JavaScript: $('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')}) Here are examples of activating individual tabs in different ways: // Select tab by name $('#myTab a[href="#profile"]').tab('show') // Select first tab $('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show') // Select third tab (0-indexed, first option) $('#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 must also have the **.in** class, as shown in the following example: The following example demonstrates tabs using data attributes with a fade effect:

• Tutorial Point Home
• iOS
• Java
  • jmeter
  • ejb

(#) !(#) ## Methods **$().tab:** This method activates a tab element and its content container. Tabs should have a data-target or a href in the DOM pointing to the container node.

• Home
.....

$(function () { $('#myTab a:last').tab('show') }) The following example demonstrates the use of the **.tab** method with the tab plugin. In this example, the second tab (iOS) is activated.

• Tutorial Point Home
• iOS
• Java
  • jmeter
  • ejb

$(function () { $('#myTab li:eq(1) a').tab('show'); }); ## Events The following table lists the events for the tab plugin. These events can be used as hooks in functions. | Event | Description | Example | | --- | --- | --- | | show.bs.tab | This event fires on tab show, but before the new tab has been shown. Use **event.target** and **event.relatedTarget** for the active tab and the previous active tab (if available) respectively. | $('a').on('show.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab}) | | shown.bs.tab | This event fires after the tab has been shown. Use **event.target** and **event.relatedTarget** for the active tab and the previous active tab (if available) respectively. | $('a').on('shown.bs.tab', function (e) { e.target // activated tab e.relatedTarget // previous tab}) | The following example demonstrates the use of plugin events, showing the current and previously visited tabs:

---

Active Tab:

Previous Tab:

---

• Tutorial Point Home
• 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 previous tab var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); });}); (#) !(#)