• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

highlight active menu item

it's a standard menu using a UL & LI and a href's.  I want to show a special color on the menu item for the currently displayed page.

How is this typically done?

thanks
0
tf2012
Asked:
tf2012
  • 2
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
$(".menuItem").each(function() { 
     if( location.href.indexOf( $(this).attr("href") ) >= 0 ) $(this).addClass("special_color");
     else $(".menuItem").removeClass("special_color");
});

Open in new window

AND/OR :
$("a.menuItem").click(function(evt) {
    evt.preventDefault();
    $(".menuItem").removeClass("special_color");
    $(this).addClass("special_color");
});

Open in new window

With CSS :
.special_color {
   background:red;
}

Open in new window

0
 
tf2012Author Commented:
@leakim971

I'd like to try it but my a href's don't have classes, they are generated by wordpress.  The parent li, does however, have a class of 'menu-item'

Can you show me how to reference 'li.menu-item a' with the script you posted?

thanks!
0
 
leakim971PluritechnicianCommented:
$("li.menu-item a").each(function() { 
     if( location.href.indexOf( $(this).attr("href") ) >= 0 ) $(this).closest("li.menu-item").addClass("special_color");
     else $(this).closest("li.menu-item").removeClass("special_color");
});

Open in new window


if it don't work, please provide a link to your site.
0
 
tf2012Author Commented:
thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now