Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

Simple javaScript tabs with no jQuery

Resources

Releases

No releases published
You can’t perform that action at this time.