Change class for same-page links and headings

[yousername]

Hello!

I am totally new to JavaScript. My knowledge is barely enough to adapt some ready-made code to suit my needs.

What I'm trying to accomplish now is beyond my abilities. I have looked all over, but didn't find anything similar to what I need. Or maybe I just don't know what to be looking for.

I have a sprites based menu consisting of five links to name anchors on the same page. Each of these anchors is placed beside a header div.

I need to make the menu items keep their hover state on click and at the same time make the respective header div change its class too. When another link is clicked I need the previous one and the div to return to their original state.

So one click changes the state (class attribute) of two separate items and at the same time reverts any such previous change.

A similar example or tutorial would be great. Or just a noob-oriented explanation. Or maybe you could point me in the right direction.

Thank you!

PS
If having a look at what I have now would help - it's all here: artplusart.org/beta

[RamananKalirajan]

Hi yousername,
You can do that. It's some what similar to Tabber Component. But instead of tab you want to highlight you header menu.

This is a example you can look into it

http://www.barelyfitz.com/projects/tabber/

You should have three classes
1) Normal
2) Highlight
3) Selected

Defaultly the first link of you header should have the class "selected" and the rest with the class "Normal" . Add onmouseover and onmouseout events for the header link. onclick of the particular link change the class to "selected" and make all the other links to "Normal". If you still cant able to get what i am saying just post back i will give you a working example.

Thanks and Regards
Ramanan Kalirajan

[yousername]

Thanks Ramanan! I will try what you suggest.