本文档旨在指导开发者如何在 Bootstrap 5 导航栏中动态添加 “active” 类，以实现当前选中页面的高亮显示。我们将探讨使用 JavaScript (包括 jQuery) 来监听导航链接的点击事件，以及如何在页面加载时根据 URL 自动设置激活状态。同时，提供示例代码和注意事项，帮助你轻松实现导航栏的动态激活效果。
动态添加 “active” 类
在 Bootstrap 5 中，通过给导航链接添加 active 类，可以使其在视觉上突出显示，表明当前页面所对应的导航项。本节将介绍几种动态添加 active 类的方法。
方法一：使用 jQuery 监听点击事件
以下代码演示了如何使用 jQuery 监听导航链接的点击事件，并在点击时移除其他链接的 active 类，然后将 active 类添加到当前点击的链接。
$('.navbar-nav .nav-item a').click(function(e) { $('.navbar-nav .nav-item a').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } // e.preventDefault();});
代码解释：
$(‘.navbar-nav .nav-item a’): 选择器选取所有导航栏中的链接。.click(function(e) { … }): 为每个链接绑定点击事件处理函数。$(‘.navbar-nav .nav-item a’).removeClass(‘active’): 在点击事件发生时，首先移除所有导航链接的 active 类。var $this = $(this): 将当前点击的链接保存到变量 $this 中。if (!$this.hasClass(‘active’)) { $this.addClass(‘active’); }: 检查当前链接是否已经有 active 类，如果没有，则添加。// e.preventDefault();: 注释掉的 e.preventDefault() 用于阻止链接的默认跳转行为。如果你的应用不是单页应用 (SPA)，则应该注释掉这一行，允许链接跳转到目标页面。
注意事项：
确保你的 HTML 结构与选择器 .navbar-nav .nav-item a 相匹配。如果你的应用是单页应用 (SPA)，你需要使用 e.preventDefault() 阻止链接的默认跳转行为，并通过 JavaScript 来处理页面切换。
方法二：使用纯 JavaScript
以下代码演示了如何使用纯 JavaScript 实现类似的功能。
var btns = document.querySelectorAll("#navigation .navbar-nav .nav-link");for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function () { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; });}
代码解释：
document.querySelectorAll(“#navigation .navbar-nav .nav-link”): 选择所有导航栏的链接遍历每个链接，并添加点击事件监听器点击事件触发时，获取当前激活的元素，并移除 active 类为当前点击的元素添加 active 类
方法三：页面加载时根据 URL 设置激活状态 (非单页应用)
对于非单页应用，每次页面加载时，都需要根据当前 URL 自动设置导航栏的激活状态。以下是一种实现方式：
$(document).ready(function() { var currentUrl = window.location.href; $('.navbar-nav .nav-item a').each(function() { var linkUrl = $(this).attr('href'); if (currentUrl.indexOf(linkUrl) > -1) { $('.navbar-nav .nav-item a').removeClass('active'); $(this).addClass('active'); } });});
代码解释：
$(document).ready(function() { … }): 确保在 DOM 加载完成后执行代码。var currentUrl = window.location.href: 获取当前页面的 URL。$(‘.navbar-nav .nav-item a’).each(function() { … }): 遍历所有导航链接。var linkUrl = $(this).attr(‘href’): 获取当前链接的 href 属性值。if (currentUrl.indexOf(linkUrl) > -1) { … }: 检查当前 URL 是否包含链接的 href 值。如果包含，则认为当前链接对应于当前页面。$(‘.navbar-nav .nav-item a’).removeClass(‘active’): 移除所有导航链接的 active 类。$(this).addClass(‘active’): 将 active 类添加到当前链接。
注意事项：
indexOf 方法用于判断一个字符串是否包含另一个字符串。如果 currentUrl 包含 linkUrl，则 indexOf 方法返回 linkUrl 在 currentUrl 中首次出现的位置，否则返回 -1。这种方法假设链接的 href 属性值是 URL 的一部分。你需要根据你的实际应用场景调整判断逻辑。
方法四：监听滚动事件并动态添加active类
$(window).scroll(function () { var distance = $(window).scrollTop(); $('.page-section').each(function (i) { if ($(this).position().top <= distance + 250) { $('.navbar-nav a.active') .removeClass('active'); $('.navbar-nav a').eq(i) .addClass('active'); } });}).scroll();
代码解释：
监听窗口的滚动事件获取滚动条距离顶部的距离遍历每个 .page-section 元素，并判断元素距离顶部的位置是否小于滚动条距离 + 250如果小于，则移除所有导航栏链接的 active 类，并为当前遍历到的 .page-section 元素对应的导航栏链接添加 active 类
总结
本文档介绍了多种在 Bootstrap 5 导航栏中动态添加 active 类的方法，包括使用 jQuery 监听点击事件、使用纯 JavaScript 实现类似功能，以及在页面加载时根据 URL 自动设置激活状态。你可以根据你的实际应用场景选择最适合的方法。 记住根据你的 HTML 结构调整选择器，并根据你的应用类型（单页应用或非单页应用）选择是否阻止链接的默认跳转行为。
以上就是Bootstrap 5 Navbar 激活状态动态添加教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1321168.html
微信扫一扫 
支付宝扫一扫 
