引言：基于 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 样式。
/* 定义激活类样式 */
.active {
color: green; /* 文本颜色变为绿色 */
font-weight: bold; /* 字体加粗 */
text-decoration: underline; /* 添加下划线 */
}优点
- 灵活性高： 回调函数内部可以执行任何复杂的逻辑，不仅仅是简单的相等比较，例如可以进行正则表达式匹配、子字符串包含检查等。
- 可读性好： 逻辑清晰，易于理解筛选条件。
方法二：直接利用 jQuery 属性选择器进行高效匹配
jQuery 提供了强大的属性选择器，允许我们直接在选择器字符串中指定元素的属性及其值。这种方法通常更简洁，且在大多数情况下效率更高。
描述
通过在选择器中直接使用 [attribute="value"] 的语法，jQuery 能够直接从 DOM 中筛选出 href 属性值精确匹配特定字符串的 标签。这种方式将筛选逻辑内置到选择器引擎中，减少了 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 脚本。
jQuery 根据 href 属性值选择元素并添加激活类
