javascript - 使用 jquery 突出显示事件链接

Question

我试图突出显示事件链接，它确实突出显示了它，但下划线突然被删除了。无法弄清楚我做错了什么:

$(document).ready(function () {
    var str = location.href.toLowerCase();
    $('nav ul li a').each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $('a.active').removeClass('active');
            $(this).parent().addClass('active');
        }
    });
});

HTML:

<nav>
    <ul>
        <li><a class="active" href="#intro" title="Intro">Intro</a></li>
        <li><a href="#what" title="What We Do">What We Do</a></li>
        <li><a href="#how" title="How We Do It">How We Do It</a></li>
        <li><a href="#modus" title="Our Modus Operandi">Our Modus Operandi</a></li>
    </ul>
</nav>

有什么帮助吗？谢谢。

Answer 1

我可以说你做错了什么!!您正在从 a 标记中删除事件类，然后将其添加到它的 parent，即 li。所以基本上你需要做的是将它添加回当前 a 并且你可以通过在添加 active 之前删除 .parent() 来实现类和你的更新函数如下:

$(document).ready(function () {
    var str = location.href.toLowerCase();
    $('nav ul li a').each(function () {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
            $('a.active').removeClass('active');
            $(this).addClass('active');
        }
    });
});