Super Simple Tabs 1.1
Created Thursday 17th of September 2009 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on jquery.com fails, e-mail me.
What it Does
This is an extremely basic tabs-plugin which allows you to create tabbed content from the ever-so-common list of in-page-links. The plug-in takes one argument; 'selected', which allows you to set which tab should be selected by default. It defaults to the first tab in the list.
How to Use
jQuery('ul.tabs').superSimpleTabs(); would make every ul with the class 'tabs' hide show the content its links are pointing to.
Example Code
HTML
<div id="jquery-super-simple-tabs-example">
<ul>
<li><a href="#jquery-super-simple-tabs-example-1">Content 1</a></li>
<li><a href="#jquery-super-simple-tabs-example-2">Content 2</a></li>
<li><a href="#jquery-super-simple-tabs-example-3">Content 3</a></li>
</ul>
<div id="jquery-super-simple-tabs-example-1">
Content 1
</div>
<div id="jquery-super-simple-tabs-example-2">
Content 2
</div>
<div id="jquery-super-simple-tabs-example-3">
Content 3
</div>
</div>
JS
jQuery('#jquery-super-simple-tabs-example ul').superSimpleTabs();
Source Code
jQuery.fn.superSimpleTabs = function (selected) {
var sel = selected || 1;
return this.each(function () {
var ul = jQuery(this);
var ipl = 'a[href^=#]';
// Go through all the in-page links in the ul
// and hide all but the selected's contents
ul.find(ipl).each(function (i) {
var link = jQuery(this);
if ((i + 1) === sel) {
link.addClass('selected');
}
else {
jQuery(link.attr('href')).hide();
}
});
// When clicking the UL (or anything within)
ul.click(function (e) {
var clicked = jQuery(e.target);
var link = false;
if (clicked.is(ipl)) {
link = clicked;
}
else {
var parent = clicked.parents(ipl);
if (parent.length) {
link = parent;
}
}
if (link) {
var selected = ul.find('a.selected');
if (selected.length) {
jQuery(selected.removeClass('selected').attr('href')).hide();
}
jQuery(link.addClass('selected').attr('href')).show();
return false;
}
});
});
};
Random jQuery Plug-ins
Captcha Refresh
If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...
Tag Sizes
Use this plug-in on a list of tags (li:s) and it will use whatever numbers found in the list to give each tag a corresponding size.
Live Validation
Use this plug-in to add live validation to any form on your page. The plug-in indicates whether a form control is valid or not by switching between an...
