how to achieve active state in a navigation for a one page website

how to achieve active state in a navigation for a one page website

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".
Here is how the navigation is set up in the HTML:
<div id="navbar" class="center">
<ul>
<li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#music">music</a></li>
<li><a href="#videos">videos</a></li>
<li><a href="#connect">connect</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div>
I have written the rest of my code out in this jsFiddle:
http://jsfiddle.net/GdePr/. Can anyone think of some solutions?