首页 建站教程 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中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 668
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持