如何在单页网站的导航中实现活动状态

我正在开发一个一页网站。在这个网站中，我希望在导航栏中的活动部分或“页面”带有下划线。目前，我点击链接后会显示带下划线的链接。但是，当我单击转到另一个活动“页面”时，它仍然带有下划线。

以下是在 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>

我已经在这个 jsFiddle 中编写了其余的代码：http://jsfiddle.net/GdePr/。有人能想出一些解决方案吗？

你只是忘记添加 jquery 并将代码设置为在 dom 上运行：http://jsfiddle.net/GdePr/8/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').css('text-decoration', 'none');//don't forget to reset other inactive links
     $(this).css('text-decoration', 'underline');
     });
 });

但我建议是添加课程active到选定的链接并给出它underlineCSS 文件中的属性，以便您稍后可以在脚本中识别当前的活动链接：http://jsfiddle.net/GdePr/14/

$(function(){
    $('#navbar a').click(function () {
        $('#navbar a').removeClass('active');
        $(this).addClass('active');
     });
 });

CSS:

 a.active{
       text-decoration: underline !important; 
    }