title: Nav addClass/removeClass on click
body: <p>I have a menu that links to content on the same page and through jQuery fades div's in and out, working perfectly.</p>
  
  <p>The first link in the navigation has a class attached to it (current_page_item) and I would like, on click of any other link in the navigation, to remove that class and add it to the clicked link.</p>
  
  <p>So far I've tried something like:</p>
  
  <pre><code>$(function() {
      $("#nav-links a").click(function(){
          $("#nav-links ul li").removeClass("current_page_item").find("li:last a").addClass("current_page_item");
          });
      });
  </code></pre>
  
  <p>which doesn't work.</p>
  
  <p>I'm very new to javascript so any help would be appreciated.</p>
  
  <p>Thanks!</p>
  
  <p>EDIT:</p>
  
  <p>Here is the HTML for the navigation:</p>
  
  <pre><code>            &lt;div id="nav-wrap"&gt;
  
                  &lt;ul class="group" id="nav-links"&gt;
                      &lt;li class="current_page_item"&gt;&lt;a href="#recent" class="linkclass recent"&gt;RECENT&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#work" class="linkclass work"&gt;WORK&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#who" class="linkclass who"&gt;WHO&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#services" class="linkclass services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact" class="linkclass contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
              &lt;/div&gt;
  </code></pre>
  
  <p>EDIT 2:</p>
  
  <p>Using the answers below it still doesn't seem to achieve what I want. Perhaps it's because of the jQuery plugin I'm using (magic line). <a href="http://css-tricks.com/5582-jquery-magicline-navigation/" rel="nofollow">Link</a></p>
  
  <p>So basically I'd like the 'line' to stay underneath what is clicked. Which works if I load a new page with the 'current_page_item' in the right place, but as I'm fading DIVs in and out, I can't do that.</p>
  
  <p>The line bounces back to the li item with 'current_page_item' class. Perhaps this code can be modified to add the class to the clicked element?</p>
  
  <p>Here's the code.</p>
  
  <pre><code>    $(function() {
  
          var $el, leftPos, newWidth,
              $mainNav = $("#nav-links");
  
          $mainNav.append("&lt;li id='magic-line'&gt;&lt;/li&gt;");
          var $magicLine = $("#magic-line");
  
          $magicLine
              .width($(".current_page_item").width())
              .css("left", $(".current_page_item a").position().left)
              .data("origLeft", $magicLine.position().left)
              .data("origWidth", $magicLine.width());
  
          $("#nav-links li a").hover(function() {
              $el = $(this);
              leftPos = $el.position().left;
              newWidth = $el.parent().width();
              $magicLine.stop().animate({
                  left: leftPos,
                  width: newWidth
              });
          }, function() {
              $magicLine.stop().animate({
                  left: $magicLine.data("origLeft"),
                  width: $magicLine.data("origWidth")
              });
          });
      });
  </code></pre>