ansaurus

Question

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

Answer 1

+1 A:

...your <head> and opening <body> tags...
<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>
<script type="text/javascript">
(function( $ ) {
 $( "#menu ul li a" ).click( function() {
    $( this ).parent().parent().filter( 'a' ).removeClass( 'highlight' );
    $( this ).addClass( 'highlight' );
 });
})( jQuery );
</script>
</body>
</html>

Jacob Relkin 2010-03-14 06:57:27

Thanks Jacob -how do I call this from the menu?

Jonathan Lyon 2010-03-14 07:01:56

@Jonathan, just add this to your jQuery.ready code and you're all set.

Jacob Relkin 2010-03-14 07:04:13

@jacob - sorry please excuse my ignorance but can you tell me how I add this to my header in terms of syntax

Jonathan Lyon 2010-03-14 07:06:37

Or rather you can just stick this at the end of your `<body>` tag.

Jacob Relkin 2010-03-14 07:07:01

Hi Jacob - perfect(ish) that works apart from it doesn't remove the class so every item is highlighted if I click on it

Jonathan Lyon 2010-03-14 07:11:55

@Jonathan, Updated, try it now

Jacob Relkin 2010-03-14 07:13:08

Hi jacob figured it out - your help in where to add the code along with edtsech's code worked like magic - thanks so much for your help!

Jonathan Lyon 2010-03-14 07:14:45

Answer 2

+1 A:

May be so?

$('#menu li a').click(function(){
  $('#menu li a').removeClass('highlight');
  $(this).addClass('highlight');
});

edtsech 2010-03-14 06:58:14

Thanks that worked in combination with Jacob's help in where to add the code

Jonathan Lyon 2010-03-14 07:14:06

ansaurus

tags:

views:

answers:

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

related questions