title: jQuery Add/Remove Current with Element Id
body: <p>I'm trying to 
  1) apply "current" class to link (id="book") as default when the page is first loaded, and 
  2) when a link in the ul "submenu" is clicked, add "current" to its class and remove "current" from the previous "current" link. I'm a beginner so please explain in the simplest terms. Any help would be greatly appreciated. Thanks.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function setCurrent(obj){
  $('ul#submenu li a').each(function(){   
      $('.current').removeClass('current'); 
  });
  $(obj).addClass('current');
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="setCurrent('book')"&gt;
  &lt;div id="container"&gt;
  &lt;div id="content-top"&gt;&lt;/div&gt;
  &lt;div id="content-left"&gt;&lt;/div&gt;
  &lt;div id="content-main"&gt;
      &lt;iframe src="port_book.html" name="contentframe" align="middle" scrolling="no" id="contentframe"&gt;&lt;/iframe&gt;     
  &lt;/div&gt;  
  &lt;div id="content-right"&gt;&lt;/div&gt;
  &lt;div id="content-bottom"&gt;
      &lt;ul id="submenu"&gt;
      &lt;li&gt;&lt;a onclick="setCurrent(this);" href="port_book.html" id="book" target="contentframe"&gt;book&lt;/a&gt;&lt;span class="bar"&gt;|&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a onclick="setCurrent(this);" href="port_poster.html" id="poster" target="contentframe"&gt;poster&lt;/a&gt;&lt;span class="bar"&gt;|&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a onclick="setCurrent(this);" href="port_annual_report.html" id="annualreport" target="contentframe"&gt;annual report&lt;/a&gt;&lt;span class="bar"&gt;|&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a onclick="setCurrent(this);" href="port_branding.html" id="branding" target="contentframe"&gt;branding&lt;/a&gt;&lt;span class="bar"&gt;|&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a onclick="setCurrent(this);" href="port_packaging.html" id="packaging" target="contentframe"&gt;packaging&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p> </p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>ul#submenu li{
  color: #770046;
  }
  ul#submenu li a{
  color: #333;
  }
  ul#submenu li.current a{
  color: #770046;
  }
  </code></pre>