Skip to content

onikienko/jsTabs

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published