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);
}
});
});





3 Comments
Tipo di misura Toraceand 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 insert1 Trackback