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 -->
<ol class="tabs">
 <li class="tab" data-tab="tab1">Tab 1</li>
 <li class="tab" data-tab="tab2">Tab 2</li>
</ol>

<div class="content" data-tab="tab1">Content 1</div>
<div class="content" data-tab="tab2">Content 2</div>

// JavaScript Listener
let nav = $('.tabs');
let tabs = new Tabs(nav, "tab1", t => console.log("Tab ${t} was clicked");

Tabs.activateTab(tab)

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.

Arguments:

• tab (String) – The name of the tab to activate