如何在 CSS 中设置当前页面链接的样式？

在 CSS 中设置当前页面链接的样式：综合指南

设计人员通常会通过区分当前页面的链接来增强用户体验其他，突出其活跃状态。实现这一目标的一种有效方法是通过 CSS，提供灵活性和轻松的自定义。

为了改变当前页面链接的外观，CSS 提供了一个简单但功能强大的解决方案：

<code class="css">a:active {
  color: #A60500;
  background-color: #000000;
}</code>

在此代码中，当前活动的链接将在黑色背景上显示为红棕色文本颜色。这种视觉差异可以帮助用户更直观地浏览网站。

对于更高级的修改，jQuery 提供了更好的控制。通过利用 .each 函数，您可以迭代所有链接，并将活动类动态应用到与当前页面 URL 匹配的链接：

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

此代码确保活动类仅添加到链接对应于当前页面，无论使用的页面结构或特定 URL。

要进一步细化链接的选择，请考虑使用更具体的选择器，例如 $("nav [href]") 如果您的链接位于导航元素内。此外，如果您的 URL 包含参数，您可能需要在比较 URL 之前删除它们以考虑这些变化。

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