how to loop through menu and remove class and then add class to current menu item

Posted by Jonathan Lyon on Stack Overflow See other posts from Stack Overflow or by Jonathan Lyon
Published on 2010-03-14T06:45:58Z Indexed on 2010/03/14 6:55 UTC
Read the original article Hit count: 713

Filed under:

removeclass

|

addclass

|

jQuery

|

css

Hi all

I have this menu structure that is used to navigate through content slider panels.

 <div id="menu">
  <ul>
    <li><a href="#1" class="cross-link highlight">Bliss Fine Foods</a></li>
    <li><a href="#2" class="cross-link">Menus</a></li>
    <li><a href="#3" class="cross-link">Wines</a></li>  
    <li><a href="#4" class="cross-link">News</a></li>   
    <li><a href="#5" class="cross-link">Contact Us</a></li> 
  </ul>
</div>

I would like to loop through these elements and remove the highlight class and then add the highlight class to the current / last clicked menu item.

Any ideas? Any help would be greatly appreciated.

Thanks

Jonathan

© Stack Overflow or respective owner

Related posts about removeclass

Jquery removeClass Not Working

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey, My site is here: http://treethink.com What I have going is a news ticker on the right that is inside a jquery function. The function starts right away and extracts the news ticker and then retracts it as it should. When a navigation it adds a class to the div, which the function then checks… >>> More
JQuery removeClass wildcard

as seen on Stack Overflow - Search for 'Stack Overflow'
Is there any easy way to remove all classes matching, for example, color-* so if I have an element: <div id="hello" class="color-red color-brown foo bar"></div> after removing, it would be <div id="hello" class="foo bar"></div> Thanks! >>> More
JQuery Find #ID, RemoveClass and AddClass

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Guys, I have the following HTML <div id="testID" class="test1"> <img id="testID2" class="test2" alt="" src="some-image.gif" /> </div> I basically want to get to #testID2 and replace .test2 class with .test3 class ? I tried jQuery('#testID2').find('.test2').replaceWith('… >>> More
removeClass jquery statement not working

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I have the following JQuery statement and it is adding the class 'current' but it is not removing the class form the siblings. Any ideas why? $('.page_link[longdesc=' + page_num + ']').addClass('current').siblings('.current').removeClass('current'); Malcolm >>> More
jQuery Accordion Plugin: removeClass('selected')

as seen on Stack Overflow - Search for 'Stack Overflow'
I am using the Accordion menu to filter a data table. The menu contains two filters, with multiple options under each. You can only have ONE filter selected at a time. If you click between the two options under the first filter, the style class, 'selected' is added and removed without a problem… >>> More

Related posts about addclass

jQuery addClass on $.post

as seen on Stack Overflow - Search for 'Stack Overflow'
I am basically trying to create a small registration form. If the username is already taken, I want to add the 'red' class, if not then 'green'. The PHP here works fine, and returns either a "YES" or "NO" to determine whether it's ok. The CSS: input { border:1px solid #ccc; } .red { border:1px… >>> More
JQuery Find #ID, RemoveClass and AddClass

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi Guys, I have the following HTML <div id="testID" class="test1"> <img id="testID2" class="test2" alt="" src="some-image.gif" /> </div> I basically want to get to #testID2 and replace .test2 class with .test3 class ? I tried jQuery('#testID2').find('.test2').replaceWith('… >>> More
jquery question - addclass to element depending on active image in rotating banner

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a banner that rotates a series of three images. The active one has a display:block, while the inactive have display:none. I'm trying to match the class for the active image with an tag so that I can add an "active" class to the a tag. Having some trouble writing that function. It's adding… >>> More
jQuery UI Dialog Error: b("<div></div>").addClass("ui-widget-overlay") is undefined

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the below code for my a Dialog box for a which contains a dropdown field KPMS.ServiceRequests.Status = { showOptions : function(requestId, userId, requestType) { var url = BASE_URL+'service_requests/status_options/'; $("#dialog-modal").dialog("destroy"); $("#dialog-modal").load(url… >>> More
Animate Jquery addClass on hover

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm new to Jquery so unsure how i would go about editing the code below to create a fade in when the class element is hovered over. <script type="text/javascript"> <![CDATA[//><!-- $(function() { $('div.work-item').hover(function() { }).hover(function() {… >>> More