如何使用 CSS 和 jQuery 对当前页面链接设置不同的样式？-css教程-PHP中文网

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

Linda Hamilton

发布： 2024-12-15 17:59:10

原创

643 人浏览过

How Can I Style the Current Page Link Differently Using CSS and jQuery?

使用 CSS 设置不同的当前页面链接样式

在网站中导航时，在视觉上区分当前页面与其他页面可以增强用户体验。本文探讨了一种 CSS 解决方案来更改当前活动页面的链接颜色。

考虑以下 HTML 结构：

<ul>

登录后复制

首先，我们将使用 CSS 来设置所有链接的样式:

li a {
  color: #A60500;
}

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

登录后复制

现在，让我们解决当前页面链接的 CSS 问题。使用 jQuery，我们可以遍历所有链接并检查它们的 href 属性是否与当前页面的 URL 匹配：

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

登录后复制

加上此操作，指向当前页面的链接将接收“active”类。然后，我们可以增强 CSS 以更改具有该类的元素的链接颜色：

.active {
  color: #FFEE00;
}

登录后复制

但是，请务必注意以下注意事项：

<ul>

取决于页面结构，可能需要缩小链接选择范围。

如果使用 URL 参数，可能需要剥离它们以确保准确匹配。

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