JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 922c96d Nov 5, 2015
Failed to load latest commit information.
_tmp Logo added Sep 19, 2015
css Plugin release Sep 15, 2013
img Plugin release Sep 15, 2013
js Update to 1.0.2 Nov 1, 2013 Readme update Sep 19, 2015
ion-tabs.jquery.json Update to 1.0.2 Nov 1, 2013 Update readme Nov 5, 2015 Update readme Nov 5, 2015


English description | Описание на русском

jQuery tabs plugin. Easy and well done tabs with many options and skin support


  • Supports many groups of tabs at one page.
  • Generate events and callbacks.
  • Support many types of position saving, for each tabs group on the page.
  • Very easy in set up and customisation. Has skin support.
  • Has public methods for outside control.
  • Cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Ion.Tabs supports touch-devices (iPhone, iPad, etc.).
  • Ion.Tabs freely distributed under terms of MIT licence.



Import this libraries:

  • jQuery
  • ion.tabs.min.js

Add the following stylesheets to the page:

Plus, a skin for the tabs. Two skins are included:

  • ion.tabs.skinBordered.css
  • ion.tabs.skinFlat.css


Create this HTML structure:

<div class="ionTabs" id="tabs_1" data-name="Tabs_Group_name">
    <ul class="ionTabs__head">
        <li class="ionTabs__tab" data-target="Tab_1_name">Tab 1 name</li>
        <li class="ionTabs__tab" data-target="Tab_2_name">Tab 2 name</li>
        <li class="ionTabs__tab" data-target="Tab_3_name">Tab 3 name</li>
    <div class="ionTabs__body">
        <div class="ionTabs__item" data-name="Tab_1_name">
            Tab 1 content
        <div class="ionTabs__item" data-name="Tab_2_name">
            Tab 2 content
        <div class="ionTabs__item" data-name="Tab_3_name">
            Tab 3 content

        <div class="ionTabs__preloader"></div>

To initialise tabs, call $.ionTabs("selector"):

$.ionTabs("#tabs_1");                       // one tabs group
$.ionTabs("#tabs_1, #tabs_2, #tabs_3");     // if you have many tabs groups on the page


Property Default Description
type hash Optional property, choose position saving type:
hash — save tabs position to the site url, using hash (see the example in the address bar). Allows to send tabs position via links.
storage — save tabs position to the Local Storage. Tabs position is remembered only at one computer.
none — don't save tabs position. Each time page reloads, the first tab of each group will be open.

Callback and events

Property Default Description
onChange - Calls each time you switch tabs, returns object with group name, active tab name and active tab ID.
window.event ionTabsChange - Or you can subscribe on ionTabsChange event.
The event gets the same object as onChange callback.

An example of a tabs initialisation:

$.ionTabs("#tabs_1, #tabs_2", {
    type: "storage",                    // hash, storage or none
    onChange: function(obj){            // callback

To subscribe on tabs change event you can do this:

$(window).on("ionTabsChange", function(e, obj){

Public methods

Switching tabs from outside: $.ionTabs.setTab(group, tab);:

$(".myButton").on("click", function(){
    $.ionTabs.setTab("Tabs_Group_name", "Tab_1_name");

Update history

Support Ion-series plugins development: