Some nice tab-based navigation I created for the site of a customer. It basically works using so called 'blocks', ie. you name your div-tags based on some logic.
In my case, I'm naming my div-elements based on their function, so they'll be easier grouped and their function aka content is very fast identified. ;)
The following tab navigation list is based on Listamatic: Unraveled CSS Tabs, originally created by Joshua Kaufman. I've simply added some unobstrusive JS-code (onclick) - if you're using this with a text-browser, your page should show up quite nice ;)
Some nifty form data:
A lil unordered list:
My javascript function switchTabDivs() tries to identify the block name by splitting the given id, using only the first part of the returned array. For those familiar with PHP, split() does the same as explode(). ;)
I'm using the first word of the id as the block identifier, but of course you may change this behaviour (and script) the way YOU want it to work. I can already imagine stuff like an optional parameter letting you decide what split string to use or what the 'trigger' word shall be. ;)
Just take a look in the code and have fun (License: GNU GPL) ;)
Fabian 'ginsterbusch' Wolf, 2006-07-05 (yyyy-mm-dd) / f2w.de + data-travelers.de.