jQuery JUI Tabs Plugin

JUI Tabs is very small and simple but effective jQuery plugin that provides tabbed content for the modern web pages.

It is part of the JUI Collection plugins. Any of them is absolutely individual and can be used separately without any dependences from each other.

JUI Tabs is only few lines of jQuery code but it works perfectly. The tabbed navigation can have unlimited tabs and they don't need any id or href HTML attributes.

Here is the HTML structure:

        <div class="jui-tabs-container" id="tabsOne">
            <ul>
                <li class="active"><a>Tab 1</a></li>
                <li><a>Tab 2</a></li>
                <li><a>Tab 3</a></li>
            </ul>
            <div class="jui-tabs">
                <div class="jui-tab active">
                    Content of the tab
                    Content of the tab
                </div>
                <div class="jui-tab">
                    Content of the tab
                    Content of the tab
                </div>
                <div class="jui-tab">
                    Content of the tab
                    Content of the tab
                </div>
            </div>
        </div>

Initialize the plugin with a selector:

$(someSelector).juitabs();

Author: Anton Radev

E-mail: anton.radev@gmail.com

Website: antonradev.com

Linkedin: www.linkedin.com/in/antonradev

jQuery JUI

jQuery JUI Tabs - Demo page