title: Trying to use jQuery's .addClass method with navigation
body: <p>i have a Nav wherein i'm attempting to use jQuery's addClass method to set the link color of the last clicked link. problem is then i have to use removeClass on all other links in the Nav. that's what i'm having trouble with. </p>
  
  <p>I have written the code in a naive way, but know this is not good programming. below is the code with style sheet ref. </p>
  
  <pre><code>jQuery('#shop-nav').click(function(){
      jQuery("#shop-nav").addClass("clicked");
      jQuery("#art-nav").removeClass("clicked");
      jQuery("#obj-nav").removeClass("clicked");
      jQuery("#acc-nav").removeClass("clicked");
  });
  
  jQuery('#art-nav').click(function(){
      jQuery("#art-nav").addClass("clicked");
      jQuery("#shop-nav").removeClass("clicked");
      jQuery("#obj-nav").removeClass("clicked");
      jQuery("#acc-nav").removeClass("clicked");
  });
  </code></pre>
  
  <p>etc. etc!</p>
  
  <p>the HTML is </p>
  
  <pre><code>&lt;div id="nav-cell-1" class="grid f-cell nav-cell"&gt;
  &lt;ul id="main-nav" class="nav clearfix"&gt;
      &lt;li&gt;&lt;a href="#" id="shop-nav"&gt;Shop&lt;/a&gt;
          &lt;ul id="shop-cats"&gt;
              &lt;li&gt;&lt;a href="#" id="art-nav"&gt;Art&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&amp;#8226;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="obj-nav"&gt;Objects&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&amp;#8226;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="acc-nav"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>a:link, a:visited {color:#cfb199;text-decoration:none} /* official this color:#9d9fa1; work color: #222*/
  a:active, a:hover {color:#9d9fa1;text-decoration:none} /* old color:#9d9fa1; */ /* official color:#cfb199; work color: #f00*/
  a:link.clicked, a:visited.clicked {color:green;text-decoration:underline}
  </code></pre>
  
  <p>a demo site is here:
  <a href="http://www.tomcarden.net/birdycitynav/partial-nav-demo.html" rel="nofollow">http://www.tomcarden.net/birdycitynav/partial-nav-demo.html</a></p>
  
  <p>I did solve part of the problem by using the <code>this</code> reference, but this do not include the <code>.removeClass</code> part. </p>
  
  <pre><code>jQuery('#shop-cats&gt;li&gt;a').click(function(){
      jQuery(this).addClass("clicked");
  });
  </code></pre>