Tabs (using only native DOM methods)
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
libs
LICENSE
README.md
index.html
tabs.css
tabs.js

README.md

About

A port of jQuery Tabs using only native DOM methods.

Usage

<div class="tabs">
    <div class="tab">
        one
    </div>
    <div class="tab">
        two
    </div>
    <div class="card">
        <img src="//placehold.it/200&text=one">
    </div>
    <div class="card">
        <img src="//placehold.it/200&text=two">
    </div>
</div>
var tabs = new Tabs();

Options

  • root: Specify the root element
  • tabs: Specify the selector for the tab elements
  • cards: Specify the selector for the card elements
  • index: Specify the 0-based index for the active tab & card
  • callback: A callback function to run when the active tab changes. Returns the 0-based index of the active tab.

Ex:

var tabs = new Tabs({
    root: document.getElementById('#tabs'),
    tabs: '.myTabs',
    cards: '.myCards',
    index: 99,
    callback: function(index) {
        console.log('Yay, ' + index + ' was clicked.');
    }
});

Defaults

{
    root: document.body,
    tabs: '.tab',
    cards: '.card',
    index: 0,
    callback: function(){}
}