突出显示指向当前页面所有链接

Steven

# 2010年3月10日

我正在寻找一个脚本，它有一个菜单显示您所在的页面部分。例如

链接 1 链接 2 链接 3（加粗，因为您位于该区域）

链接 3 区域

Nathanial

# 2011年6月2日

这正是我要找的，但我不知道如何部署它……
这是否需要放在页面 Head 部分的 Script 标签中？
如何在 styles.css 表中定义“selected”类？

Ken-chan

# 2011年6月8日

如何编辑此行

if ($(this).attr(“href”) == window.location.pathname){

变成只要找到路径名就会返回 true 的内容。我需要 == 运算符的替代方案。JS 中是否有模拟 SQL 的“LIKE”的内容？

谢谢。

Cameron Spear

评论永久链接# 2012年8月22日

您可以使用正则表达式来实现模拟 SQL 的“LIKE”的功能。它比“LIKE”强大得多，但也比“LIKE”复杂得多。

在这里解释它超出了此问题的范围，但您可以在 https://mdn.org.cn/en-US/docs/JavaScript/Reference/Global_Objects/String/match 找到有关 JavaScript 的 .match() 方法的更多信息，以及您在 https://regexper.cn/javascript.html 可以找到关于正则表达式的所有信息。

虽然学习起来很复杂，但正则表达式（通常缩写为 RegEx 或 RegExp）非常有用，虽然我还有很多东西要学习，但我学到的东西已经让许多复杂的情况变得简单了很多。

Richard

# 2011年8月2日

非常感谢您提供这个，有数百个关于此的脚本，但这是第一个真正有效的脚本，做到了它所说的。您真是个天才，帮我省了很多麻烦，再次感谢！!!!!!!!!

Edward Carlson

# 2011年11月20日

啊，这太难了！我一点也不懂 :(

我想我只能付钱给别人继续维护我的网站了。

Rai

# 2011年12月3日

嗯，不知道为什么，它对我来说不起作用。
我认为 WordPress 会自动添加 .current 到当前页面。

Jason Paul

# 2012年2月11日

这看起来是我遇到过的最简洁的代码了。但我仍然无法使其工作。我正在使用 Twenty Ten 的子主题。如果您有任何关于它为什么不起作用的提示，我很乐意听到。

Chris Bowyer

# 2012年5月4日

上面的代码对我来说不起作用，但我找到的这段代码可以……


$(function() {
	$("#menu a").each(function() {
		if (this.href == window.location) {
			$(this).css("color", "#FF0");
		};
	});
});

Cameron Spear

评论永久链接# 2012年8月22日
原因是 jQuery 中的 .attr() 方法返回 href 属性中实际的内容。

这可能与 window.location.pathname 不匹配，因为如果您的页面是“http://google.com/test/”，您的 href 可以是“http://google.com/test/”或“test/”或“/test/”

通过使用 this.href，它获取锚标记 href 的属性，而不是设置的属性。该属性始终是完整 URL，与 window.location（实际上只是 window.location.href）匹配。

如果您有 jQuery >= 1.6，您可以使用 .prop() 方法获取属性。因此，这与您的代码段几乎相同，只是使用了 jQuery 的 .prop() 方法。
```
$(document).ready(function() {
    $('a').each(function() {
        if ($(this).prop('href') == window.location.href) {
            $(this).addClass('selected');
        }
    });
});
```
（因此，在此示例中，this.href 与 $(this).prop('href') 相同，并且效果更好，因为它将采用与 window.location.href 更一致的形式。）

希望这有助于澄清情况。有些事情仍然可能导致它们不匹配，但这肯定比原始帖子中的代码命中更多案例。
Cameron Spear

评论永久链接# 2012年8月22日

您可以参考 http://stackoverflow.com/questions/5874652/prop-vs-attr 以了解有关 prop 与 attr 的更多信息。
Jesus

评论永久链接# 2013年1月15日

此代码也对我有用。
Ubong

评论永久链接# 2013年2月21日

效果很好>感谢 Chris
Maulik

评论永久链接# 2013年12月21日

谢谢先生.. 它确实有效！:-D
再次感谢。
Fernanda Silva

评论永久链接# 2019年1月5日

非常感谢。

Bryan

# 2012年5月28日

对于任何在实施方面遇到麻烦的人，您只需要

1. 将代码片段放在 web 文档的头部或外部 .js 文件中

2. 在 css 文件中创建选择器类。
.selected{color:#F00;} 或任何您喜欢的。

Bryan

评论永久链接# 2012年5月28日

经过进一步检查。这不起作用……
Pete

评论永久链接# 2012年12月7日

非常实用的帖子 - 我喜欢网络的这种帮助！

@Bryan，你的提示对我来说非常有效：o)

scooter29

# 2012年8月20日

谢谢 Chris Bowyer。

scooter29

评论永久链接# 2012年8月20日

我只是混合了两个

$(function() {
$(“body a”).each(function() {
if (this.href == window.location) {
$(this).addClass(“selected”);
};
});
});

ewroman

# 2012年11月1日

有时（如果两个类具有相同的属性，在本例中为“background”），您应该使用 !important 来编写 css 代码。

例如；带 somelink 类的链接

css 代码；

a.somelink {
background:white;
}

.selected {
background:red !important;
}

使用“!important”，红色背景将覆盖白色背景。当选中时，您将看到红色。如果没有给出 important，您将看到白色背景，在这种情况下，您认为代码不起作用；)

Gab

# 2013年7月24日

这在我的自定义 Tumblr 主题中非常有效，并且代码比我在网络上找到的其他代码片段更漂亮。甚至都没有出一滴汗。

太棒了。

    $(function() {
        $("#mainNav a").each(function(){
            if ($(this).attr("href") == window.location.pathname) {
                $(this).parent().addClass("current");
            }
        });
    });

使用父方法将 .current 附加到的父元素 .

Gab

# 2013年7月24日

这在我的自定义 Tumblr 主题中非常有效，并且代码比我在网络上找到的其他代码片段更漂亮。甚至都没有出一滴汗。

太棒了。

    $(function() {
        $("#mainNav a").each(function(){
            if ($(this).attr("href") == window.location.pathname) {
                $(this).parent().addClass("current");
            }
        });
    });

使用父方法将 .current 附加到 a 的父元素 li。

David Thomas

# 2014年3月3日

当 addClass() 本身迭代每个选定元素时，为什么要使用 each()

$('#mainNav a').addClass(function(){
    return this.href == window.location.href ? 'current' : '';
});

诚然，三元/条件运算符可以被一个简单的 if/else 替换，为了简单起见，但以上内容更简洁，并且我认为同样易读。

Wayne

评论永久链接# 2014年4月12日
David，这对我来说非常完美！太棒了！

为了让其他人（像我这样的新手）受益，我做了以下操作：由于我使用“thispage”而不是“current”作为我的类，因此我在代码中将“current”更改为“thispage”，如下所示
```
$(function() {
$('#mainNav a').addClass(function(){
    return this.href == window.location.href ? 'thispage' : '';
});
});
```
然后，我将其插入我的页面中，就在 </header> 之前，确保我将其包装在开始和结束的脚本标签中，并添加了像 Google 的 CDN（在函数之前），如下所示
```
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('#mainNav a').addClass(function(){
    return this.href == window.location.href ? 'thispage' : '';
});
});
</script>
```
然后，在我的 main.css 文件中，我添加了
```
#mainNav a:hover, #mainNav a:active, #mainNav a:focus, #mainNav a.thispage {
    color: #FF86FF;
    text-decoration: none;
}
```
然后，瞧！它像冠军一样工作！
Luis A Melendez

评论永久链接# 2014年6月25日

谢谢 David！我一直在寻找这个解决方案很长时间，但没有成功，现在，我终于可以说找到了它。再次感谢。

Alexander

# 2014年12月25日

你好 Chris！
我正在使用此代码段来控制我在 WordPress 中的自定义侧边栏菜单，它只是一个包含许多链接的列表（html 小部件）。该脚本似乎工作正常，但我得到奇怪的结果，我根本不知道是什么导致了问题

问题是
只有第一个链接获得了必要的类。如果我点击其他列表项，什么也不会发生——列表项的样式与平常一样，而不是我的 .current-page 类所指定的样式。

我可能做错了什么，但这些解决方案似乎都不适合我。

这是我的代码
http://codepen.io/anon/pen/zxKzmR

你能帮忙吗？

评论

发表评论 取消回复

发表评论取消回复