jQuery menu active link [SOLVED]

[antosha]

Hello,
I am trying to make a jquery menu that when I click on one of the links (without reloading the page), it changes its class to "active" and removes this class when I click on another link.

here is my code :

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function() {
  $(".buttons").children().("a").click(function() {
    $(".buttons").children().toggleClass("selected").siblings().removeClass("selected");
  });
});
</__script>


  <ul class="buttons">
    <li><a class="button" href="#">Link1</a></li>
    <li><a class="button" href="#">Link2</a></li>
    <li><a class="button" href="#">Link3</a></li>
    <li><a class="button" href="#">Link4</a></li>
  </ul>

Can someone tell me why my code is not working?
Thanks

[nicmare]

make it much more easier:
$("ul.buttons a").click(function () {
$(this).toggleClass("selected");
});

[antosha]

thanks for the reply, but that doesn't do what I want.
With your solution, if I click on another link, the link I clicked before keeps the "selected" class.

You need to remove the class on the other elements before.
I got it working like that:

Code: Select all

 $(document).ready(function() { 
 $("a.button").click(function () {
 $("a.button").removeClass("selected");
   $(this).toggleClass("selected");
 });
}); 

Thanks