本文档旨在指导开发者如何在 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 结构调整选择器，并根据你的应用类型（单页应用或非单页应用）选择是否阻止链接的默认跳转行为。
