Add a class "active" to menu item when clicked. Have it shut off when another menu item is clicked.

Add a class "active" to menu item when clicked. Have it shut off when another menu item is clicked.

No matter what I try I cannot manage to get the li in my single page portfolio to switch/append the class "active" when I click it. I tried using a couple suggestions that I found in the forum but none of them seem to work. Can somebody help me out?? Here's the url to my portfolio:

http://alexseabrook.com/test.html

I thought that maybe this would work but no matter how many different ways I tried to implement it, it just didn't cooperate (I am a newbie):
  1. <script>
  2. $(document).ready($(function ()
  3. {      
  4.     $("li").click(function(){
  5.         $("li").removeClass("off");
  6.         $(this).addClass("active");
  7.     });
  8.   
  9. }));
  10. </script>

I just want to be able to make it so that when I click on, say, Development, it will highlight it by appending
  1. <li class="active">
or switching out
  1. <li class="off"> to <li class="active">
Thank you in advance for the help--

Alex