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。所以基本上你需要做的是将它添加回当前的.parent()，你可以在添加active类之前删除$(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'); } }); });并且你的更新函数如下所示：

{{1}}

Answer 2

这个更简单，它可以完成工作：

$('nav li').click(function(e) {
    e.preventDefault();
    $('nav li a.active').removeClass('active');
    $('a', this).addClass('active');
});

小提琴here。

使用jquery突出显示活动链接

2 个答案: