本文旨在提供一种在 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 类的方法：页面加载时激活、点击激活和滚动激活。开发者可以根据自己的项目需求选择合适的方法，或者将它们结合起来使用，以实现最佳的导航体验。 在实际应用中，请根据具体情况调整代码，并注意代码的可维护性和可扩展性。
