Constructor
new Tabs(navSelector, contentSelector, initial, callback)
- Source:
- See:
Examples
<!-- Example HTML -->
<nav class="tabs" data-group="primary-tabs">
<a class="item" data-tab="tab1">Tab 1</li>
<a class="item" data-tab="tab2">Tab 2</li>
</nav>
<section class="content">
<div class="tab" data-tab="tab1" data-group="primary-tabs">Content 1</div>
<div class="tab" data-tab="tab2" data-group="primary-tabs">Content 2</div>
</section>// JavaScript
const tabs = new Tabs({navSelector: ".tabs", contentSelector: ".content", initial: "tab1"});
tabs.bind(html);Parameters:
| Name | Type | Description |
|---|---|---|
navSelector |
string | The CSS selector used to target the navigation element for these tabs |
contentSelector |
string | The CSS selector used to target the content container for these tabs |
initial |
string | The tab name of the initially active tab |
callback |
function | null | An optional callback function that executes when the active tab is changed |
Members
_content :HTMLElement|null
- Source:
A reference to the HTML container element of the tab content
Type:
- HTMLElement | null
_contentSelector :string
- Source:
The CSS selector used to target the tab content element
Type:
- string
_nav :HTMLElement|null
- Source:
A reference to the HTML navigation element the tab controller is bound to
Type:
- HTMLElement | null
_navSelector :string
- Source:
The CSS selector used to target the tab navigation element
Type:
- string
active :string
- Source:
The value of the active tab
Type:
- string
callback :function|null
- Source:
A callback function to trigger when the tab is changed
Type:
- function | null
Methods
activate(tabName, triggerCallback)
- Source:
Activate a new tab by name
Parameters:
| Name | Type | Description |
|---|---|---|
tabName |
string | |
triggerCallback |
boolean |
bind(html)
- Source:
Bind the Tabs controller to an HTML application
Parameters:
| Name | Type | Description |
|---|---|---|
html |
HTMLElement |