如何使用jQuery匹配指定href值的元素并添加active类

算力阿峰

2026-8-26

实现方法

你不需要用getElementById之类的方法绕路，直接调整原有匹配逻辑即可，有两种简洁的实现方式：

方式1：直接用属性选择器选中目标元素（推荐）

jQuery原生支持属性选择器，可以直接定位到href属性等于指定值的链接，不需要手动遍历所有链接，代码更简洁执行效率更高：

$(document).ready(function () {
  // 把此处的值改成你需要匹配的目标href即可
  const targetHash = '#tab1';
  $('.hs-mega-menu ul li a[href="' + targetHash + '"]').addClass('active');
});

方式2：保留原有遍历逻辑修改判断条件

如果你想沿用原来的遍历写法，注意不要直接取DOM元素的href属性做判断——原生DOM的href属性会返回补全了域名、当前页面路径的完整URL，和你写在标签上的#tab1字符串不相等，需要用jQuery的attr()方法获取标签上书写的原始href值再判断：

$(document).ready(function () {
  const $links = $('.hs-mega-menu ul li a');
  const targetHash = '#tab1';
  $.each($links, function (index, link) {
    if ($(link).attr('href') === targetHash) {
      $(this).addClass('active');
    }
  });
});