Tabbed Navigation

To make effective use of screen space, it often makes sense to sibling concepts into a tabbed navigation area. The Tabs() class helps to implement this easily. Simply create instances of the Tabs() class when you register event listeners for your UI element and the instance will do the rest of the work for you.

class Tabs(tabs)

A helper class for creating tabbed containers. Create one Tabs instance per tabbed navigation container in your application.

Arguments:

• tabs (HTMLElement|JQuery) – An HTML element or JQuery object representing the tab navigation container.

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")
});

Tabs.active

type: jQuery

The currently active tab

Tabs.group

type: jQuery

The named tab group Retrieved as a property since the composition of the DOM may change over time

Tabs.tabs

type: jQuery

The collection of tabs