Simple javaScript tabs with no jQuery
HTML 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.
example
source
.gitattributes
.gitignore
readme.md
readme.ru.md

readme.md

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