首页 建站教程 WEB前端 正文

jQ如何实现当前分类链接高亮

在开发网页时需要实现当前页面高亮效果,我们可以使用 jQuery 来高亮当前分类链接,以下是一个实现示例:javascript $(document).ready(function() { // 获取所有的分类链接 var links = $(".category-list a"); // 循环遍历每一个链接 $(l...

jQ如何实现当前分类链接高亮 导航高亮 链接高亮 分类高亮 jQuery  图1

在开发网页时需要实现当前页面高亮效果,我们可以使用 Jquery 来高亮当前分类链接,以下是一个实现示例:

javascript
$(document).ready(function() {  // 获取所有的分类链接
  var links = $(".category-list a");  // 循环遍历每一个链接
  $(links).each(function() {    // 检查链接地址是否与当前页面地址相同
    if ($(this).attr("href") == window.location.href) {      // 如果相同,则为该链接添加 "active" 类
      $(this).addClass("active");
    }
  });
});

这段代码会在页面加载完成后执行,获取页面中带有 .category-list 类的元素下的所有链接,然后循环遍历每一个链接,检查其链接地址是否与当前页面地址相同,如果相同就为该链接添加 active 类。

您需要在 css 文件中定义 active 类的样式,例如:

css
.active {  color: red;  font-weight: bold;
}

当链接被添加 active 类时,它的颜色将变为红色并加粗显示。您可以根据需要自定义 active 类的样式。

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/223.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2347
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 2201
发布评论

感谢您的支持