Base

Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).

<nav class="mi-tab" data-component="tab">
    <ul>
        <li class="mi-active"><a href="#tab1">...</a></li>
        <li><a href="#tab2">...</a></li>
    </ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>
    

JavaScript behavior

Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.

<button onclick="$('#tab').tab('prev');">prev</button>
<button onclick="$('#tab').tab('next');">next</button>
<button onclick="$('#tab').tab('open', 4);">open</button>
<button onclick="$('#tab').tab('close', '#tab4');">close</button>
<button onclick="$('#tab').tab('closeAll');">closeAll</button>

<nav id="tab" class="mi-tab" data-component="tab">
    <ul>
        <li><a href="#tab1">Home</a></li>
        <li class="mi-active"><a href="#tab2">Shop</a></li>
        <li><a href="#tab3">Catalog</a></li>
        <li><a href="#tab4">T-Shirts</a></li>
        <li><a href="#tab5">Brand</a></li>
    </ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
<div id="tab4">...</div>
<div id="tab4">...</div>

Equals

Often it is important to create tabs that are equal in width regardless of content. data-equals is here to help you with this task.

<nav class="mi-tab" data-component="tab" data-equals="true">
    <ul>
        <li class="mi-active"><a href="#tab1">...</a></li>
        <li><a href="#tab12">...</a></li>
    </ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>

Livetabs

Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up data-live class, and make sure your tabs have this same class. It's that simple.

<nav id="livetabs" data-component="tabs" data-live=".tab-live"></nav>

<div id="tab-general" data-title="General" class="tab-live">...</div>
<div id="tab-additional" data-title="Additional" class="tab-live">...</div>

Active

To denote active tab, and to let users know where they are, use class active.

<nav class="mi-tab">
    <ul>
        <li><a href="">...</a></li>
        <li class="mi-active"><a href="">...</a></li>
        <li><a href="">...</a></li>
    </ul>
</nav>

Settings

equals

• Type: boolean
• Default: false

Making all tabs in a set equal width

active

• Type: string
• Default: false

Responsible for denoting active tab.

live

• Type: string
• Default: false

Responsible for live tabs (see Livetabs example)

hash

• Type: boolean
• Default: true

This will add a hash and an ID to the URL.

Callbacks

init

$('#tab').on('init.tabs', function()
{
    // do something...
});

next

$('#tab').on('next.tabs', function($item)
{
    // do something...
});

prev

$('#tab').on('prev.tabs', function($item)
{
    // do something...
});

open

$('#tab').on('open.tabs', function()
{
    // do something...
});

opened

$('#tab').on('opened.tabs', function()
{
    // do something...
});

close

$('#tab').on('close.tabs', function()
{
    // do something...
});

closed

$('#tab').on('closed.tabs', function()
{
    // do something...
});

API

open

$('#tab').tab('open', 1);

// or

$('#tab').tab('open', '#tab1');

close

$('#tab').tab('close', 1);

// or

$('#tab').tab('close', '#tab1');

closeAll

$('#tab').tab('closeAll');

next

$('#tab').tab('next');

prev

$('#tab').tab('prev');

destroy

$('#tab').tab('destroy');