In this article
This plugin is often used with the .nav
element, however you are not restricted in terms of what HTML markup you can use.
If you’re interested in automatically generating an interactive tabs section from an existing static list (<ul>
or <ol>
element), refer to the Tabs plugin.
Usage
Use .tab
on each of the elements containing tab content.
Via data attributes
Trigger elements, usually buttons or links, are used to reveal tabbed content on click. You can activate a tab navigation without writing any JavaScript by adding data-toggle="tab"
to a trigger element and identifying the tab containing the content using the href
(in the case of a link) or data-target
attributes.
<ul class="nav" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link is-active" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-content-1" aria-selected="true">Tab 1</a>
<a class="nav-link" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-content-2" aria-selected="false">Tab 2</a>
</li>
...
</ul>
<div class="tab-content">
<div class="tab fade is-shown is-active" id="tab-content-1" role="tabpanel">...</div>
<div class="tab fade" id="tab-content-2" role="tabpanel">...</div>
...
</div>
Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
The active trigger and tab elements must have .is-active
applied.
Use .fade
on each .tab
to apply a fade transition. The active .tab
element must also have .is-shown
to make the content visible.
Options
An additional class name to apply to the active trigger element can be specified by using the data-active-class
attribute. For example, to apply a class name of .text-primary
to apply the data-active-class="text-primary"
to the trigger element.
Events
Name | Description |
---|---|
tab.show | Fires on tab show, but before the new tab has been shown. |
tab.shown | Fires after the tab has been shown. |
tab.hide | Fires on tab hide, after the tab has been hidden. |
tab.hidden | Fires after the tab has been hidden. |
Use event.target
to target the tab being shown or hidden.
each('a[data-toggle="tab"]', function(a) {
a.addEventListener('tab.show', function(e) {
e.target // newly activated tab
e.relatedTarget // previous active tab, if any
});
});