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
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
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!