如何使用 CSS 和 JavaScript 为当前页面链接设置不同的样式？

使用 CSS 突出显示当前页面链接

问题：

如何更改样式当前页面上的链接以将其与其他页面区分开来？具体来说，我想交换文本和背景颜色。

CSS 解决方案：

li a {
  color: #A60500;
}

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

示例：

<ul>

JavaScript解决方案：

要自动应用活动样式，可以使用 jQuery 的 .each 函数：

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

注意事项：

<ul>

为了更精确的链接选择，请考虑使用“nav”等类属性[href]"。

如果您的 URL 包含查询参数，请考虑使用以下方式剥离它们：

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

此方法无需手动修改每个页面，并确保跨页面的样式一致不同的页面 URL。

以上是如何使用 CSS 和 JavaScript 为当前页面链接设置不同的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！