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

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

将当前页面的链接样式设置为与其他页面不同是很常见的Web 开发中的任务。实现此目的的一种方法是使用 CSS 和 jQuery。

使用 CSS

要设置当前页面上的链接样式，您可以使用以下 CSS：

<code class="css">li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}</code>

此代码会将页面上所有链接的颜色更改为#A60500。当鼠标悬停在链接上时，其颜色将更改为#640200，背景颜色将更改为#000000。

使用 jQuery

您还可以使用 jQuery更改当前页面的链接颜色。为此，您可以使用以下代码：

<code class="javascript">$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});</code>

此代码将循环访问页面上的所有链接，并将“active”类添加到与当前页面 URL 匹配的链接。然后，您可以使用 CSS 以不同的方式设置“活动”类的样式，例如更改其颜色。

注意： jQuery 代码可能需要根据页面的结构进行修改，并且正在使用的链接。您可能需要缩小链接的选择范围或删除 URL 参数，以确保正确的链接样式。

以上是如何使用 CSS 和 jQuery 更改当前页面链接的颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！