title: Switch menu color for current part of page
body: <p>I'm making a one-page site where the menu is fixed, so when the user clicks a link it scrolls down to that part of the page. The menu link of the section the user is on should have a different color. For this I have the class "current." I'm trying to make this change with jQuery addClass() and removeClass(), but am having no luck. The code I have so far is below.</p>
  
  <pre><code>$(document).ready ( function(){
      $(".about").click(function(){
          $(".home").removeClass("current");
          $(".about").addClass("current");
      });
  });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>menu HTML:</p>
  
  <pre><code>&lt;nav id="nav_list"&gt;
  &lt;ul&gt;
  &lt;li class="home current"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="about"&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="portfolio"&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li class="testimonials"&gt;&lt;a href="#testimonials"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
  &lt;li class="contact"&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>div HTML:</p>
  
  <pre><code>&lt;div id="about" class="page"&gt;
  &lt;p&gt;Lorem ipsum dolor sit&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(There is a div to go with each menu link.)</p>
  
  <p><strong>EDIT2</strong></p>
  
  <p>css:</p>
  
  <pre><code>#nav_list .current a{
  color: #D4D1FA;
  }
  </code></pre>
  
  <p>I noticed that if I remove the #nav_list, I don't see a change in color from the start.</p>