如何用CSS和jQuery改变当前页面链接的颜色？-js教程-PHP中文网

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

Linda Hamilton

发布： 2024-10-20 11:47:02

原创

1039 人浏览过

How to Change the Color of the Current Page Link with CSS and jQuery?

使用 CSS 更改当前页面链接的颜色

操作当前页面链接的外观是常见的 CSS 样式要求。为了将其与其他页面链接区分开来，用户通常喜欢交换文本和背景的颜色。这是针对您的样式请求的全面解决方案：

CSS 样式

要设置当前页面链接的样式，请将以下 CSS 规则添加到样式表中：

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

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

登录后复制

jQuery 脚本

提供的 jQuery 脚本允许您识别当前页面链接并动态添加一个类：

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

登录后复制

根据您的具体页面结构，您可能需要优化选择器链接 ($("[href]"))。例如，如果链接包含在 nav 元素中，您可以将选择范围缩小到 $("nav [href]")。

如果您的页面使用 URL 参数，您可以在比较之前删除它们链接以确保识别当前页面链接：

<code class="javascript">if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...</code>

登录后复制

这种方法无需单独修改每个页面的 CSS 样式。

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