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

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

Linda Hamilton

发布： 2024-12-14 04:25:11

原创

650 人浏览过

How Can I Style Current Page Links Differently with CSS?

使用 CSS 自定义当前页面的链接样式

Web 开发人员通常希望将当前页面上的链接外观与其他页面区分开来。一种常见的方法是交换文本和背景颜色。

要使用 CSS 实现此效果，请考虑以下方法：

li a {
  color: #A60500;
}

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

登录后复制

此代码确保网页上的所有链接都有一个红色 (#A60500) 文本颜色。当用户将鼠标悬停在链接上时，其文本颜色会变为黑色 (#640200)，背景也会变为黑色 (#000000)。

在 HTML 中，创建一个包含多个链接的导航菜单：

<ul>

登录后复制

或者，您可以使用 jQuery 动态添加一个类到当前页面link:

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

登录后复制

此脚本迭代页面上的所有链接，并将活动类添加到与当前 URL 匹配的类中。然后可以使用 CSS 以不同的方式设置活动链接的样式，从而允许您自定义当前页面链接的外观。

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