title: how to achieve active state in a navigation for a one page website
body: <p>I am working on a one page website. In this website, I would like to have the active section or "page" to be underlined in the navigation bar. Currently I have the link to display with underline after clicking on it. However, it stays underlined when I click to go to another active "page". </p>
  
  <p>Here is how the navigation is set up in the HTML:</p>
  
  <pre><code>&lt;div id="navbar" class="center"&gt;
      &lt;ul&gt;
         &lt;li&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#about"&gt;about&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#music"&gt;music&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#videos"&gt;videos&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#connect"&gt;connect&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have written the rest of my code out in this jsFiddle: <a href="http://jsfiddle.net/GdePr/" rel="nofollow">http://jsfiddle.net/GdePr/</a>. Can anyone think of some solutions?</p>