javascript - 突出显示当前链接

Question

嗨，我必须只使用 html 和 javascript。我创建了一个页面，其中包含一个顶部导航链接，这些链接的 url 类似于：

domain.com, domain.com/b1, domain.com/b2

如何突出显示当前链接。

Answer 1

使用 jQuery

$('a[href="' + window.location.pathname + '"]').addClass('highlight');

如果它不是好的位置对象，则用位置对象的一个​​属性（或属性组合）替换路径名。

该片段将'highlight'类添加到具有指定href的链接，然后您可以编写一些css来突出您的链接。

Answer 2

如果我理解问题，您可以尝试链接标签的 html-attribute 样式：

<a style="color: red">link</a>

或编辑该链接的 CSS 文件。

您可以使用服务器端设置类并将此类定义为 CSS。

如果仅编码 JS，请参阅 JS 对象 window.location。

Answer 3

您需要使用一个简单的 JS 脚本来检查href链接并将其与window.location.href（当前 URL）进行比较。

这是一个使用 JQuery 的简单示例：

var currentUrl = window.location.href;

$('a').each(function(index) {
    var url = $(this).attr("href");
    if (url === currentUrl) {
        $(this).addClass("current");
    } else {
        $(this).removeClass("current");
    }
});

在这里，current如果它是当前链接，它将向链接添加一个类。我在 JSFiddle 上有一个演示。