Fork me on GitHub

Just Tabs

Light weight jQuery plugin for tabs.

Why just Tabs?

  • responsive
  • compatible with IE8+
  • easy to use
  • easy in customization
  • light weight
DOWNLOAD

Demo:

1. Nested tabs

Lorem
ipsum
dolor
Sed leo sem, tristique et ipsum quis, ultricies euismod ex. Maecenas feugiat condimentum condimentum. Ut cursus egestas metus, mattis interdum lorem tincidunt ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante. Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.

2. Vertical tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante.
Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.

3. Disabled tabs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet nunc ac velit pretium pretium. Nam facilisis lacinia est, non egestas massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla at neque fringilla, placerat lorem sit amet, iaculis augue. Phasellus non risus a ligula consequat elementum. Curabitur vel accumsan felis. Vivamus eget eros eget orci semper consectetur eleifend placerat ante.
Curabitur vel facilisis felis, nec luctus diam. Cras feugiat orci ac neque blandit interdum. Etiam sodales leo ac felis egestas lacinia. Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.
Sed cursus condimentum consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In scelerisque facilisis metus, ut consequat sapien dignissim at. Fusce eget ligula luctus, lobortis justo at, laoreet lorem.

Push the buttons to test :)

Markup:

Initialization:


    $(document).ready(function () {
        $('.jt-wrapper').justTabs();
    });

Parameters:

saveTabInStorage - save current active tab in local storage



    $(document).ready(function () {
        $('.jt-wrapper').justTabs({
            saveTabInStorage: true
        });
    });

vertical - if you need vertical tabs and width of tab nav in px (by default 150px).



    $(document).ready(function () {
        $('.jt-wrapper').justTabs({
            {
                vertical: true,
                width: '200px'
            }
        });
    });

Methods:

getCurrentTab - return index of current tab
selectTab - select current tab
disableTab - if you need to disable tab, you can not switch on it (also you can add class .link_tabs_disable to link in tabs navigagtion)
enableTab - enable disabled tab 



    $('.jt-wrapper').justTabs('getCurrentTab');

    $('.jt-wrapper').justTabs('selectTab', n);

    $('.jt-wrapper').justTabs('disableTab', n);

    $('.jt-wrapper').justTabs('enableTab', n);

n - number of tab (start from 0)

Copyright © 2015