2

我正在开发一个单页网站。在这个网站上，我想在导航栏中为活动部分或“页面”加下划线。目前，我有链接在点击后用下划线显示。但是，当我单击转到另一个活动“页面”时，它会保持下划线。

以下是在 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/。谁能想到一些解决方案？

4

3 回答 3

5

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

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

CSS：

 a.active{
       text-decoration: underline !important; 
    }
于 2013-08-27T00:25:36.363 回答
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的。a然后就是那些兄弟姐妹里面find的所有s。a这将被证明是一个可重用的功能。

小提琴

另外，不要使用!important. 它可能会给你带来很多问题

于 2013-08-27T02:44:24.483 回答
0

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

#navbar a:active {text-decoration:underline;}
于 2013-08-27T00:22:58.893 回答