本文旨在提供一种在 Bootstrap 5 导航栏中动态添加和移除 active 类的方法，以实现导航链接的激活状态切换。针对非单页应用，我们将探讨如何在页面加载时根据当前 URL自动激活对应的导航链接，并提供使用 JavaScript 和 jQuery 实现点击激活以及滚动激活的示例代码，帮助开发者轻松实现导航栏的交互效果。
页面加载时激活导航链接
对于非单页应用（即每次点击链接都会刷新页面的应用），需要在每次页面加载时检查当前 URL，并为对应的导航链接添加 active 类。以下是一种实现方式：
$(document).ready(function() { // 获取当前页面的 URL var currentUrl = window.location.href; // 遍历导航栏中的链接 $('.navbar-nav .nav-item a').each(function() { var linkUrl = $(this).attr('href'); // 比较链接的 URL 和当前页面的 URL if (currentUrl.indexOf(linkUrl) > -1) { // 如果匹配，则添加 active 类 $(this).addClass('active'); } });});
代码解释：
$(document).ready(function() { … });：确保在文档加载完成后执行代码。window.location.href：获取当前页面的完整 URL。$(‘.navbar-nav .nav-item a’).each(function() { … });：遍历导航栏中所有带有 nav-link 类的 标签。$(this).attr(‘href’)：获取当前链接的 href 属性值。currentUrl.indexOf(linkUrl) > -1：检查当前页面的 URL 是否包含链接的 URL。indexOf() 方法返回子字符串在字符串中首次出现的位置，如果未找到则返回 -1。$(this).addClass(‘active’)：如果 URL 匹配，则为当前链接添加 active 类。
注意事项：
indexOf() 方法可能不够精确，例如，如果 currentUrl 是 example.com/page1，而 linkUrl 是 page1，则也会匹配。更精确的匹配方法是使用正则表达式。确保 Bootstrap 的 CSS 文件已正确引入，以便 active 类能正确显示激活状态。
点击激活导航链接
以下是使用 jQuery 实现点击导航链接时激活状态切换的示例代码：
$('.navbar-nav .nav-item a').click(function(e) { // 移除所有链接的 active 类 $('.navbar-nav .nav-item a').removeClass('active'); // 为当前点击的链接添加 active 类 $(this).addClass('active'); // 阻止默认的链接跳转行为（如果需要） // e.preventDefault();});
代码解释：
$(‘.navbar-nav .nav-item a’).click(function(e) { … });：为导航栏中的所有链接绑定点击事件。$(‘.navbar-nav .nav-item a’).removeClass(‘active’);：移除所有链接的 active 类，确保只有一个链接处于激活状态。$(this).addClass(‘active’);：为当前点击的链接添加 active 类。e.preventDefault();：阻止链接的默认跳转行为。如果需要使用 JavaScript 处理导航逻辑（例如，单页应用），则需要取消注释此行。
滚动激活导航链接
对于单页应用，可以根据页面滚动的位置自动激活对应的导航链接。以下是一种实现方式：
$(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();
代码解释：
$(window).scroll(function() { … }).scroll();：绑定窗口滚动事件，并在页面加载时立即执行一次。var distance = $(window).scrollTop();：获取页面滚动的距离。$(‘.page-section’).each(function(i) { … });：遍历页面中的所有 page-section 元素（假设每个 section 对应一个导航链接）。$(this).position().top：获取当前 section 距离文档顶部的距离。if ($(this).position().top $(‘.navbar-nav a.active’).removeClass(‘active’);：移除当前激活的链接的 active 类。$(‘.navbar-nav a’).eq(i).addClass(‘active’);：为与当前 section 对应的导航链接添加 active 类。eq(i) 方法选择索引为 i 的元素。
注意事项：
确保页面中的每个 section 都有一个唯一的 ID，并且导航链接的 href 属性指向对应的 ID（例如，href=”#section1″）。可以根据实际情况调整 250 这个值，以获得最佳的激活效果。此方法需要页面结构和 CSS 的配合，确保每个 section 都有明确的边界，并且导航链接与 section 之间存在对应关系。
总结
本文介绍了三种在 Bootstrap 5 导航栏中动态添加和移除 active 类的方法：页面加载时激活、点击激活和滚动激活。开发者可以根据自己的项目需求选择合适的方法，或者将它们结合起来使用，以实现最佳的导航体验。 在实际应用中，请根据具体情况调整代码，并注意代码的可维护性和可扩展性。
以上就是Bootstrap 5 Navbar 激活状态动态切换教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1321174.html
微信扫一扫 
支付宝扫一扫 
