Search within TutorialsPark

Twitter Bootstrap Tabs


Tabs are used to navigate to local contents by clicking on panes


Twitter Bootstrap: Dynamic Tabs using Javascript

1. Dynamic tabs are created to navigate to local contents by clicking on tabbable areas or navigation panes.

2. Tabs can be created via data-attributes using class tab-content as the parent element and class tab-pane to create tabs.

.

Example: Twitter Bootstrap Dynamic Tabs using Javascript

Give it a TRY! »

Twitter Bootstrap: Dynamic Tabs with Fade effect using Javascript

1. While transitioning from one tab to another a fade in effect can be created using class .fade to each .tab-pane .

2. The first tab pane must have the class .in inorder to fade in initial content.

Example:Twitter Bootstrap Tab Fade effect Using Javascript

Give it a TRY! »

Twitter Bootstrap: Enable Tabs using Javascript

1.Tabs can be enabled using javascript method $.tab() .

2. The DOM is hooked using either class or ID .

Example:Twitter Bootstrap Enable Tabs using Javascript

Give it a TRY! »

Twitter Bootstrap: Activate Individual Tabs

1. Individual tabs can be selected using Javascript method $('selector').tab('show') .

Example:Twitter Bootstrap small Modals

Give it a TRY! »

Twitter Bootstrap: Tab Events using Javascript

Table:Twitter Bootstrap Tab Events

Event Type Description
show.bs.tab The event gets fired on tab show, and before the new tab is opened.
shown.bs.tab The event is fired on tab show after a tab has been displayed.

1. The active and previously active tabs are displayed using the Javascript events which gets fired based on the state of active tabs.

2. The active tab is displayed using event.target and the previously active tab is displayed using event.relatedTarget

Example:Twitter Bootstrap Javascript Individual Tabs

Give it a TRY! »