Avatar of tf2012
tf2012
 asked on

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
CSSHTMLjQuery

Avatar of undefined
Last Comment
tf2012

8/22/2022 - Mon
leakim971

$(".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

tf2012

ASKER
@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!
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
tf2012

ASKER
thanks
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy