使用 jQuery 根据 href 属性值选择元素并添加激活类

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用 jQuery 根据 href 属性值选择元素并添加激活类

2025-10-05

浏览次数：次

返回列表

使用 jQuery 根据 href 属性值选择元素并添加激活类

本文详细介绍了如何使用 jQuery 根据 HTML 元素的 href 属性值来选择特定元素，并为其动态添加一个 'active' CSS 类。这对于实现基于锚点链接的导航高亮或标签页状态管理非常实用，避免了依赖完整的页面 URL 进行判断，提供了两种简洁高效的实现方法，并附带完整示例和注意事项。

引言：基于 href 属性值高亮导航项的需求

在网页开发中，动态高亮当前激活的导航菜单或标签页是常见的交互需求。传统上，我们可能通过比较链接的 href 属性与 document.url（当前页面的完整 url）来判断哪个链接是激活状态。然而，在某些场景下，例如使用锚点链接（如 #tab1、#sectiona）进行页面内部导航或构建单页应用中的标签页时，我们希望根据 href 属性的特定值（而非完整 url）来激活相应的元素。这种需求要求我们能够精准地根据 href 属性的局部或精确值来选择并操作 dom 元素。

jQuery 提供了强大的选择器和 DOM 操作方法，使得根据元素属性值进行选择和修改变得非常便捷。下面将介绍两种主要方法，来实现根据标签的 href 属性值来动态添加激活类。

核心技术：jQuery 元素选择与属性过滤

jQuery 的核心优势在于其简洁高效的 DOM 操作能力。对于本教程的需求，我们将主要利用以下 jQuery 特性：

元素选择器： 用于定位一组目标元素，例如 $('.hs-mega-menu ul li a')。
filter() 方法： 允许在已选定的元素集合中进一步筛选出符合特定条件的元素。
属性选择器： 一种直接在选择器字符串中指定元素属性及其值的强大方式，例如 [href="#tab1"]。

方法一：使用 filter() 结合回调函数进行属性匹配

这种方法通过获取所有潜在的目标链接元素，然后使用 filter() 方法遍历这些元素，并在回调函数中检查每个元素的 href 属性是否与目标值匹配。

描述

首先，我们通过一个通用的选择器（例如类名或标签名）获取所有可能的链接元素。接着，调用这些元素集合的 filter() 方法，并传入一个回调函数。该回调函数会针对集合中的每个元素执行，如果返回 true，则该元素会被保留在 filter() 的结果集中；如果返回 false，则会被过滤掉。在回调函数内部，我们通过 $(this).attr('href') 获取当前元素的 href 属性值，并与预设的目标值进行比较。

示例代码

$(document).ready(function () {
  const targetHref1 = "#tab1"; // 定义目标 href 值

  // 选择所有目标链接，然后使用 filter 方法和回调函数匹配 href 属性
  $('.hs-mega-menu ul li a').filter(function() {
    // 检查当前元素的 href 属性是否与 targetHref1 严格相等
    return $(this).attr('href') === targetHref1;
  }).addClass("active"); // 为所有匹配的元素添加 'active' 类
});

CSS 样式

为了使激活状态可见，我们需要定义相应的 CSS 样式。

UXbot

AI产品设计工具

185 查看详情 UXbot

/* 定义激活类样式 */
.active {
  color: green; /* 文本颜色变为绿色 */
  font-weight: bold; /* 字体加粗 */
  text-decoration: underline; /* 添加下划线 */
}

优点

灵活性高： 回调函数内部可以执行任何复杂的逻辑，不仅仅是简单的相等比较，例如可以进行正则表达式匹配、子字符串包含检查等。
可读性好： 逻辑清晰，易于理解筛选条件。

方法二：直接利用 jQuery 属性选择器进行高效匹配

jQuery 提供了强大的属性选择器，允许我们直接在选择器字符串中指定元素的属性及其值。这种方法通常更简洁，且在大多数情况下效率更高。

描述

通过在选择器中直接使用 [attribute="value"] 的语法，jQuery 能够直接从 DOM 中筛选出 href 属性值精确匹配特定字符串的标签。这种方式将筛选逻辑内置到选择器引擎中，减少了 J*aScript 代码的编写量。

示例代码

$(document).ready(function () {
  const targetHref2 = "#tab2"; // 定义另一个目标 href 值

  // 直接使用属性选择器筛选出 href 属性等于 targetHref2 的链接
  // 并为所有匹配的元素添加 'active-test' 类
  $('.hs-mega-menu ul li a[href="' + targetHref2 + '"]').addClass("active-test");
});

CSS 样式

为了区分效果，这里定义一个不同的激活类样式。

/* 定义另一个激活类样式 */
.active-test {
  background-color: #ffddff; /* 背景色变为浅紫色 */
  border-bottom: 2px solid purple; /* 底部添加紫色边框 */
}

优点

代码简洁： 无需编写额外的回调函数，选择器本身就包含了匹配逻辑。
性能优异： jQuery 的选择器引擎通常经过高度优化，直接使用属性选择器在处理大量元素时可能比 filter() 结合回调函数更高效。

完整示例：HTML 结构与效果演示

为了更好地理解上述两种方法，以下提供一个完整的 HTML 结构，包含 jQuery 库的引入、样式定义以及两种方法的 J*aScript 脚本。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery 根据 href 属性值选择元素并添加激活类</title>
  <!-- 引入 jQuery 库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    /* 定义激活类样式 */
    .active {
      color: green;
      font-weight: bold;
      text-decoration: underline;
    }
    .active-test {
      background-color: #ffddff;
      border-bottom: 2px solid purple;
    }
    /* 基础导航样式 */
    .hs-mega-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex; /* 使用 Flexbox 使导航项水平排列 */
      border: 1px solid #ddd;
      border-radius: 5px;
      background-color: #f9f9f9;
    }
    .hs-mega-menu ul li {
      margin-right: 1px; /* 链接之间略微间距 */
    }
    .hs-mega-menu ul li a {
      display: block;
      padding: 10px 15px;
      text-decoration: none;
      color: #333;
      transition: background-color 0.3s ease;
    }
    .hs-mega-menu ul li a:hover {
      background-color: #e9e9e9;
    }
  </style>
</head>
<body>

  <div class="hs-mega-menu">
    <ul>
      <li class="n*-item"> <a class="n*-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">标签页 1 (方法一目标)</a> </li>
      <li class="n*-item"> <a class="n*-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">标签页 1 (方法一目标)</a> </li>
      <li class="n*-item"> <a class="n*-link g-py-10--md g-px-15--md" href="#tab2" role="tab" data-toggle="tab">标签页 2 (方法二目标)</a> </li>
      <li class="n*-item"> <a class="n*-link g-py-10--md g-px-15--md" href="#tab3" role="tab" data-toggle="tab">标签页 3 (未激活)</a> </li>
    </ul>
  </div>

  <script>
    $(document).ready

以上就是使用 jQuery 根据 href 属性值选择元素并添加激活类的详细内容，更多请关注其它相关文章！

# 表单 # 深圳财税关键词排名 # DJ网站建设工作 # seo小鱼 # 营销推广赠送礼品 # 秭归智能营销推广优势 # 平顶山国外网站推广 # 离石区网站推广怎么收费 # 镇江网站建设案例分析题 # 淘宝冷门绘画关键词排名 # 南宁seo平台 # 下划线 # 遍历 # 这种方法 # 显示效果 # 单选框 # css # 两种 # 选择器 # 回调 # 属性 # 排列 # cdn # 回调函数 # 正则表达式 # ajax # js # html # jquery # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：如何实现一个支持拖放(Drag and Drop)的交互式看板？

下一篇：Django视图变量安全传递到J*aScript脚本的实践指南

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

使用 jQuery 根据 href 属性值选择元素并添加激活类

引言：基于 href 属性值高亮导航项的需求

核心技术：jQuery 元素选择与属性过滤

方法一：使用 filter() 结合回调函数进行属性匹配

描述

示例代码

CSS 样式

优点

方法二：直接利用 jQuery 属性选择器进行高效匹配

描述

示例代码

CSS 样式

优点

完整示例：HTML 结构与效果演示