Something like this on line 20 of script.js:

//first element on page load
$('li.button a').eq(0).click().addClass('active');

//active element
$('li.button a').click(function() {
$('li.button a').removeClass('active');
$(this).addClass('active');
});

And in css:

li.button a.blue.active { color:#fff; }
li.button a.green.active { color:#fff; }
li.button a.orange.active { color:#fff; }
li.button a.red.active { color:#fff; }

Awesome work here, I really appreciate it.

I had a little trouble with the js but after a little googling found replacing line 46 in jquery.easing.1.3.js with this helped:

return $.easing[$.easing.def](x, t, b, c, d);

Thanks again!

Firstly - I think this is the wrong place to leave a comment like this. This is a nice piece of javascript for those who want to use it - not a preaching article on why you should use javascript.

People may have wanted to use less javascript 10 years ago - but these days it is more lightweight and more widely useable than flash, silverlight or other plugin requiring code. Clients don't really give a shit whether the iphone SHOULD have flash - fact is they want animations, they want application style functions and they want interaction on mobile devices (on all mobile devices, not just iphones).

Don't get me wrong - I think flash is great for what it does - animations, web games, fully actionscripted interaction. Its just not necessary for these small interactions which just work better using jquery.

Im afraid to say you just sound old-fashioned - Jquery works pretty well for these simple elements - and noscript is on the whole, a much easier degradation to implement than some kind of noflash alternative (of course we all know the easiest way to add noflash alternative content is using javascript)

I am using this for my navigation. Presently, it is configured similar to your sample...when a user clicks on a main heading, the list opens to reveal items below it. No new page loads. The user can now scroll down the list, click on an item, and be taken to a page.

I would like this behavior instead: when a user clicks on a main heading, a corresponding page loads AND the list opens to reveal items related to that heading.

The code in the script.js file makes opening a page when a main heading is clicked possible, but it disables the list opening feature. I would like both to happen.

Any suggestions?

Also a very helpful post!!

I to have one question, how do you display the current state of the selected tab?

THANK YOU in advance for the help