Question

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

domain.com， domain.com/b1， domain.com/b2

如何突出显示当前链接。

Answer 1

如果我提出问题，您可以尝试链接标记的html属性样式：

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

或编辑该链接的CSS文件。

您可以使用serverside设置类，并将此类定义为CSS。

如果仅编码JS，请参阅JS-object window.location。

Answer 2

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

这是一个使用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。我有一个演示here on JSFiddle。

Answer 3

使用jquery

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

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

代码段将“突出显示”类添加到指定href的链接，然后您可以编写一些CSS来突出显示您的链接。

突出显示当前链接

3 个答案: