Jump to content

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


PicnicTutorials

Recommended Posts

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 by Eric
Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

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"
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...