I need a way (with JS - not CSS) to highlight an active menu link?

[PicnicTutorials]

Good morning,

 

I need a way (with JS - not CSS) to highlight an active menu link, but, also make it un-highlight once another menu link is hovered over. From that point, CSS can handle the rest of the hover effects. Probably, hopefully, an easy thing, but I have no idea how to do it? This is all happening on the same page - hence the need for JS. Thanks for your help!

 

I did something similar to this a while back. Or rather, someone helped me with it. I'm a JS noob! I just don't know how to edit to suit. There has got to be a way to just edit what I already have? onBlur= or onFocus= or something...?

 

Here is a simple little test page. I just need "Link1" to be active (i.e. background:#ccc) on the initial page load. And once the other links are hovered over it becomes un-active (i.e background:999). Thanks!

 

>

{ visibility: inherit; } Test
<br />#tabs li {<br />background:#999;<br />list-style:none;<br />margin:5px;<br />}<br />#tabs li:hover {<br />background:#ccc;<br />}<br />



</pre>
<ul id="tabs">
Link1
Link2
Link3

Edited February 12, 2009 by Eric

[monkeysaurus]

I don't have time to knock out a full solution right now, but if you're using jQuery, this is trivial. Look into addclass and removeclass.

 

http://docs.jquery.com/Attributes/addClass

http://docs.jquery.com/Attributes/removeClass

 

Let me know if you're still having trouble and I'll knock up an example later.

[PicnicTutorials]

I don't have time to knock out a full solution right now, but if you're using jQuery, this is trivial. Look into addclass and removeclass.

 

http://docs.jquery.com/Attributes/addClass

http://docs.jquery.com/Attributes/removeClass

 

Let me know if you're still having trouble and I'll knock up an example later.

 

Cool, thanks I'll take a look. Take care!

[PicnicTutorials]

You know, on second thought, all I really need I think is this. Real simple! Maybe? I just need to make the link have focus on page load. Same as if like a mouse was hovering over it. Is that possible? That should activate my drop down on page load.

[PicnicTutorials]

You know, on second thought, all I really need I think is this. Real simple! Maybe? I just need to make the link have focus on page load. Same as if like a mouse was hovering over it. Is that possible? That should activate my drop down on page load.

 

Here is one way

It works perfect, but it doesn't un-focus when the others are focused on. And it only works on links, not "li's"