Tabbed Interface

Tabs... they're everywhere now. People know and love them, but creating them yourself can be a pain. Thankfully, jQuery UI has a simple and easy to use function to create them from an unordered list and a set of DIV's. The implementation is very quick and provides a sleek-looking interface by default, which can be styled by CSS to pretty much any look you want.

To start, create a DIV and give it an ID that you can target later with jQuery.  Inside that DIV, create an unordered list with links inside each item.  Outside of the list, but still within the DIV container, create a DIV for each of the tabs.  These will hold the content visible when each tab is active.  Give them unique IDs as well, since you will need to point to them from the links in the list above.  Now that you have each DIV created, set the HREF of each link above to the corresponding DIV.  All this nesting and referencing sounds a little confusing when written out, but the following example should make it clear:
Once you have that HTML created, the rest is up to jQuery and jQuery UI.  You'll have to load the jQuery UI into your site as well as the jQuery core.  As I do with the core jQuery (read my post on why), I recommend loading this from a Content Delivery Network (CDN) such as Google.  You can get links to that from Google's API Developer Guide.

Now to convert those LI links and DIVs into tabs... one line of magic from jQuery:

See it in action!

Experiment with this at http://jsfiddle.net/webdevem/p3sfy/