title: Updating class of list item - jQuery
body: <p>Pretty simple problem but it's been bugging me for almost an hour now. Basically, I want to update list classes onClick, then remove the class again when another item is clicked.</p>
  
  <pre><code> &lt;nav&gt;
     &lt;div class="menu-main-menu-container"&gt;
       &lt;ul id="menu-main-menu" class="menu"&gt;
         &lt;li class="current-menu-item"&gt;
           &lt;a class="scroll" href="#top"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class=""&gt;
           &lt;a class="scroll" href="#featured_work_anchor"&gt;&lt;span&gt;Featured Work&lt;/span&gt;&lt;/a&gt;
         &lt;/li&gt;
         &lt;li class=""&gt;
           &lt;a class="scroll" href="#about_contact_anchor"&gt;&lt;span&gt;About/Contact&lt;/span&gt;&lt;/a&gt;
         &lt;/li&gt;               
       &lt;/ul&gt;
     &lt;/div&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
      $('#menu-main-menu li').on('click', changeClass);
  });
  
  function changeClass() {
      $('#menu-main-menu li').removeClass('current-menu-item');
      $(this).addClass('current-menu-item');
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mw5sgcLn/2/" rel="nofollow">JSFiddle</a>, ready to go. I appreciate any help. Perhaps I'm approaching the problem wrong or maybe missing something silly ? </p>