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开发者_如何学C word the statement...any ideas?
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"
$('ul').live('click', function(event) {
var target = $(event.target);
$('#' + target.attr('id')).removeClass('inactive-class').addClass('active-class');
});
This should apply to any ul element you click. It is OK to make distinction of <ul>
elements, so maybe it's better that all the elements in the horizontal navbar are selected by class like $('ul.horiz-navbar')
.
精彩评论