本文详细介绍了如何使用 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 样式。
/* 定义激活类样式 */.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 属性值选择元素并添加激活类 /* 定义激活类样式 */ .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; } $(document).ready
以上就是使用 jQuery 根据 href 属性值选择元素并添加激活类的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581403.html
微信扫一扫 
支付宝扫一扫 
