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属性，以便稍后在脚本中识别当前活动链接：{{3 }}

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

CSS：

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

Answer 2

我不同意MaveRicks的回答。您需要将代码包装在ready()函数中。但是，要重置其他链接，我不会再次跳转到DOM。利用jQuery的siblings()函数。它获取与所选元素在同一DOM级别上的元素，然后执行指定的函数。通过执行此操作，您将阻止您单击的链接执行两个功能。

选择器还可以利用parent()

$(document).ready(function () {
    $('#navbar a').on("click", function () {
        $(this).parent().siblings().find("a").removeClass('active');
        $(this).addClass('active');
    });
});

这会找到a的父级，即li。然后，它获取li的所有兄弟姐妹，因此这不包括被点击的li的{{1}}。然后它a在这些兄弟姐妹里面的所有find。这将证明更像是一种可重复使用的功能。

Fiddle

另外，请勿使用a。这可能会给你带来许多问题

Answer 3

您可以尝试为链接定义活动状态

#navbar a:active {text-decoration:underline;}

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

3 个答案: