jsTabs

Русская документация

Simple javaScript Tabs.

• no jQuery
• onToggle event
• tab link (example.com/tabs.html#tab2)
• IE 10+

Demo

Usage

HTML:

    <link rel="stylesheet" type="text/css" href="tabs.css">
    <script type="text/javascript" src="tabs.js"></script>

    <!-- Tabs begin -->

        <section id="main_tabs">
            <ul class="tabs_nav">
                <li><a href="#tab1">Tab 1</a></li>
                <li><a href="#tab2">Tab 2</a></li>
            </ul>

            <div class="tabs_content">
                <div id="tab1">Tab1 content</div>
                <div id="tab2">Tab2 content</div>
            </div>
        </section>

    <!-- Tabs end -->

javaScript:

    //Init. '#main_tabs' is your Tabs container id's. The first tab will be activated.
    var main_tabs = new Tabs('#main_tabs');

    //make tab2 active
    main_tabs.toggle('#tab2');

    //Add onToggle event handlers
    main_tabs.onToggle(function (tab_name) {
        console.log ('It fires on every tab');
        console.log ('Fired on ' + tab_name);
    });

    //Or bind handlers only for some tabs
     main_tabs.onToggle({
        "#tab1": function (tab_name) {
            console.log('On ' + tab_name);
        }
     });

     //You may bind onToggle event handlers during Tabs init
     var new_tabs = new Tabs('#tabs_id', function (tab_name) { });

     //Or
     var another_tabs = new Tabs('#another_tabs_id', {
        "#another_tab2": function () {},
        "#another_tab5": function () {}
     });

Demo

[Русская документация] (https://github.com/onikienko/jsTabs/blob/master/readme.ru.md)

GitHub