jquery - 如何在单页网站的导航中实现事件状态

Question

我在一个单页网站上工作。在此网站中，我希望在导航栏中为事件部分或“页面”添加下划线。目前我有链接在点击它后显示带下划线。但是，当我单击转到另一个事件的“页面”时，它仍然带有下划线。

这是在 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/ .谁能想出一些解决方案？

Answer 1

您只是忘记添加 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 添加到所选链接，并在您的 CSS 文件中为其指定 underline 属性，这样您稍后就可以在脚本中识别当前事件链接:http://jsfiddle.net/GdePr/14/

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

CSS:

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