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

当前页面的 CSS 链接样式

在网页设计领域，样式链接通常是增强用户体验和网站美学。如果您希望将当前页面的链接外观与其他页面区分开来，CSS 提供了一个简单的解决方案。

使用 CSS 实现

添加以下 CSS 规则将允许您可以交换当前链接的文本和背景颜色页面：

li a {
  color: #A60500;
}

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

示例

考虑以下 HTML 结构：

应用 CSS 规则后，当前页面的链接当页面加载或用户将鼠标悬停在页面（例如“/programming.php”）上时，文本和背景颜色将交换

使用 jQuery 进行动态样式

如果您喜欢更动态的方法，jQuery 提供以下代码来实现类似的结果：

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

此代码循环访问页面上的所有链接，并向与当前 URL 匹配的链接添加“活动”类。然后，您可以使用 CSS 根据需要设置“活动”类的样式。

通过利用这些技术，您可以轻松更改当前页面的链接外观，从而提高网站的视觉吸引力和用户体验.

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