Question

I have a CMS site that I am working that utilises a horizontal main navigation and a sidebar style sub navigation.

The horizontal menu items are for the sections of the site like about us, our work etc. and the sidebar sub nav is for the content relating to that section.

Once a user clicks on one of the horizontal menu items and is presented with the content and sidebar nav for that section I would like to apply a class to the horizontal menu item relating to that section regardless of what sidebar menu item they click.

To achieve this, each sidebar menu item has a unique class assigned to it so essentially what I would like to create with jQuery is…

If “ul.about-sidebar” is displayed on page then add class “active” to the horizontal About Us menu item.

But i’m a little unsure as to how to word the statement…any ideas?

Answer 1

Something like that should work

if ($("ul.about-sidebar").length > 0) {
  $("#AboutUs").addClass("active");
}

If the About Us menu item doesn’t have a unique Id you can probably find it using a selector like:

$("#horizontalMenu .menuItem:contains('About Us')");

This looks for an element with class 'menuItem' containing the text "About Us" under the element with Id="horizontalMenu"