首页 > web前端 > css教程 > 如何使用 CSS 和 jQuery 对当前页面链接设置不同的样式?

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

Linda Hamilton
发布: 2024-12-15 17:59:10
原创
642 人浏览过

How Can I Style the Current Page Link Differently Using CSS and jQuery?

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

在网站中导航时,在视觉上区分当前页面与其他页面可以增强用户体验。本文探讨了一种 CSS 解决方案来更改当前活动页面的链接颜色。

考虑以下 HTML 结构:

<ul>
登录后复制

首先,我们将使用 CSS 来设置所有链接的样式:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}
登录后复制

现在,让我们解决当前页面链接的 CSS 问题。使用 jQuery,我们可以遍历所有链接并检查它们的 href 属性是否与当前页面的 URL 匹配:

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

加上此操作,指向当前页面的链接将接收“active”类。然后,我们可以增强 CSS 以更改具有该类的元素的链接颜色:

.active {
  color: #FFEE00;
}
登录后复制

但是,请务必注意以下注意事项:

<ul>
  • 取决于页面结构,可能需要缩小链接选择范围。
  • 如果使用 URL 参数,可能需要剥离它们以确保准确匹配。
  • 以上是如何使用 CSS 和 jQuery 对当前页面链接设置不同的样式?的详细内容。更多信息请关注PHP中文网其他相关文章!

    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板