如何使用 CSS 和 jQuery 在导航菜单中突出显示当前页面链接？

如何使用 CSS 和 jQuery 更改当前页面的链接颜色

问题：

如何更改链接的文本和背景颜色以突出显示导航中的当前页面菜单？

CSS 解决方案：

对于基本样式，CSS 提供 li 一个选择器来定位列表项内的所有链接：

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

然而，这种方法并不能区分当前页面链接。

jQuery解决方案：

要动态突出显示当前页面链接，可以使用 jQuery 的 .each 函数：

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

此代码会迭代所有链接，检查它们的 href 是否与当前页面匹配页面 URL，并添加“活动”类以匹配预定义

注意事项：

• 使用 CSS 选择器（如 $("nav [href]")）缩小链接选择范围。
• 通过剥离 URL 参数来处理它们this.href.split("?")[0].
• 这种方法可以让您避免在每个页面上手动更改并保持链接样式的一致性。

以上是如何使用 CSS 和 jQuery 在导航菜单中突出显示当前页面链接？的详细内容。更多信息请关注PHP中文网其他相关文章！