Constructor
new Tabs(tabs)
- Source:
Examples
<!-- Example HTML -->
<nav class="tabs" data-group="group1">
<a class="item" data-tab="tab1">Tab 1</li>
<a class="item" data-tab="tab2">Tab 2</li>
</nav>
<div class="tab" data-tab="tab1" data-group="group1">Content 1</div>
<div class="tab" data-tab="tab2" data-group="group1">Content 2</div>// JavaScript Listener
let nav = $('.tabs[data-group="group1"]');
new Tabs(nav, {
initial: "tab1",
callback: t => console.log("Tab ${t} was clicked")
});Parameters:
| Name | Type | Description |
|---|---|---|
tabs |
HTMLElement | JQuery | An HTML element or JQuery object representing the tab navigation container. |
Members
active :jQuery
- Source:
The currently active tab element
Type:
- jQuery
callback :function
- Source:
The callback function to trigger when a Tab is activated
Type:
- function
container
- Source:
The container element within which both the tab navigation and the tab content exists
group :jQuery
- Source:
The named tab group Retrieved as a property since the composition of the DOM may change over time
Type:
- jQuery
tab :string
- Source:
The currently active tab name
Type:
- string
tabs :jQuery
- Source:
The collection of tabs
Type:
- jQuery
Methods
activateTab(tab)
- Source:
Activate a tab by it's name. This gets called automatically when a tab in the navigation is clicked, however you may also call this function directly.
Parameters:
| Name | Type | Description |
|---|---|---|
tab |
jQuery | The tab control being activated |