使用 jQuery 根据 href 属性值选择元素并添加激活类-html教程-PHP中文网

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

碧海醫心

发布： 2025-10-05 15:53:42

原创

128人浏览过

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

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

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

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

jQuery 提供了强大的选择器和 DOM 操作方法，使得根据元素属性值进行选择和修改变得非常便捷。下面将介绍两种主要方法，来实现根据 <a> 标签的 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 样式。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

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

登录后复制

优点

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

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

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

描述

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

示例代码

$(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 库的引入、样式定义以及两种方法的 JavaScript 脚本。

<!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="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">标签页 1 (方法一目标)</a> </li>
      <li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab1" role="tab" data-toggle="tab">标签页 1 (方法一目标)</a> </li>
      <li class="nav-item"> <a class="nav-link g-py-10--md g-px-15--md" href="#tab2" role="tab" data-toggle="tab">标签页 2 (方法二目标)</a> </li>
      <li class="nav-item"> <a class="nav-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 属性值选择元素并添加激活类的详细内容，更多请关注php中文网其它相关文章！