I’m still working on the LiveResume website, just something I’m playing with in my free time, no I’m not looking for a job just have an idea that I’ve not seen anywhere else (no I’m not telling you what it is until the site is live )

This little post is to demonstrate how effective the jQuery library is.

Firstly lets have a look at the html to see what we are trying to achieve.

Now, I’m not using jQuery.ui tabs (yet…); so I want to handle the styling of the active tab.

I’ve got a style called highlight that does this.

The code below shows how effective jQuery is at removing the style from all anchor elements and adding the style to the clicked anchor.

Let’s break it down.

The first two commented lines are to enable intellisense in visual studio.

After this we create a variable menuHandler, I’m using the revealing module pattern for this.

the return function exposed the init function publically. I’ll be adding more functions to this menuHandler as I go along.

what I’m saying here is select all anchor elements that are children of the element with id=”topmenu” and add an event handler to the click event.

this line removes the highlight class from all the anchors in the same topmenu element.

this line adds the style to the clicked element.

this is somewhat equivalent to an onload event handler for the page (except it doesn’t wait for images… see jQuery docs); what I’m doing in the load handler is creating an instance of the menuHandler function and calling the init method on it.

I can recommend the book: jQuery in action if you wish to get started or improve your jQuery.