Lucid Tabs

The Lucid Tabs jQuery plugin allows you to create tabs and corresponding pages with minimal markup and styles.

Working Example

Click a tab to view a page.

• Molly
• Rufus

Markup

Markup is very straight forward. It consists of two sections: a container for the tabs and the switchable pages. The tabs themselves are anchors. Their href attributes are the IDs of their corresponding pages. (Note: the actual code on this page has extra classes to help with styling. The markup below is the minimal markup needed for the plugin.)

<div class="tabs">
    <ul>
        <li><a href="#SimplePage1">Molly</a></li>
        <li><a href="#SimplePage2">Rufus</a></li>
    </ul>
</div>

<div id="SimplePage1">
    <!-- Page content  -->
</div>

<div id="SimplePage2">
    <!-- Page content  -->
</div>

JavaScript

The code is likewise very simple. Select the tabs container(s) and call the tabs() method this plugin defines.

$(document).ready(function () {
    $(".tabs").tabs();
});

Options

The tabs() method accepts an optional argument for overriding options. Using this, you can change the functions used to show and hide pages, the CSS class used to mark selected tabs, and the tab selected when the tab set initializes.

Fancy Example

Here’s a fancier example.

• Page 1
• Page 2

Here is a sample initalization and working example.

$(document).ready(function () {
    $("FancyTabs").tabs({
        selected: 1,
        showPage: function (elem) {
            elem.css({
                "z-index": 1
            });
            elem.slideDown(1000);
        },
        hidePage: function (elem) {
            elem.css({
                "z-index": 0
            });
            elem.fadeOut(1000);
        }
    });
});

Download

jquery.tabs.js
jquery.tabs.min.js