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.

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.
Property Type Description
cssSelected string CSS class used to mark a selected tab. This is applied to the anchor element. Default is “selected”.
selected int 0-based index of the initially selected tab.
showPage function Function for displaying a page. Takes one argument, a reference to the jQuery DOM element.
hidePage function Function for hiding a page. Takes one argument, a reference to the jQuery DOM element.

Fancy Example

Here’s a fancier example. 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

{ 4 comments to read ... please submit one more! }

  1. Hi! Thanks for this code! :)

    I’ve a question: I need to switch between content by clicking not on a link (as is your code), but on an “li” (and its content, most of all!).

    I’ve almost got it, but still if I click on the content of the “li” (as for example, on the “input text” element inside of it), the associated content doesn’t show.

    Here is my HTML:

    Tipo di misura

    Torace

    and here is where I modified your js code:
    jquery.tabs.js row 40:

    //domTabs = elem.find("a[href^=#]");
    domTabs = elem.find("li[rel^=#]");

    jquery.tabs.js row 48:

    //domPage = $(domTab.attr("href"));
    domPage = $(domTab.attr("rel"));

    Can you help me?
    Thanks agains

    PS: second try, there’s no confirmation page for the post insert

  2. Sorry, me again! Had problems with code. Here is the post with my code (hopefully):

    Hi! Thanks for this code! :)I’ve a question: I need to switch between content by clicking not on a link (as is your code), but on an “li” (<b>and its content, most of all!</b>).I’ve almost got it, but still if I click on the content of the “li” (as for example, on the “input text” element inside of it), the associated content doesn’t show.Here is my HTML:<code><ul class=”tabs”> <li class=”tabButton” rel=”#content1″> <div class=”fieldBox”> <label for=”collo”>Tipo di misura</label><input id=”collo” name=”collo” type=”text” value=”" /> </div> </li> <li class=”tabButton” rel=”#content2″> <div class=”fieldBox”> <label for=”torace”>Torace</label><input id=”torace” name=”torace” type=”text” value=”" /> </div> </li></ul></code>and here is where I modified your js code:<i>jquery.tabs.js</i> row 40:<code>//domTabs = elem.find(“a[href^=#]“);domTabs = elem.find(“li[rel^=#]“);</code><i>jquery.tabs.js</i> row 48:<code>//domPage = $(domTab.attr(“href”));domPage = $(domTab.attr(“rel”));</code>Can you help me?Thanks againsPS: second try, there’s no confirmation page for the post insert

    • Matteo, sorry if you’re having trouble posting. I’m just getting set up here, so everything might not be working 100% yet.

      Your JavaScript looks good. I don’t see anything in there that would be a problem. Do you have the elements with the IDs #content1 and #content2? I didn’t see them in your post. I think what you want to do is give your divs those IDs.

      You also don’t need to include them in the same list with the tabs. In my example at the top, I have the tab buttons in one list and then the pages after. You might try that.

      Thanks, and good luck!

{ 1 Pingbacks/Trackbacks }

  1. Tweets that mention Lucid Tabs -- Topsy.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>