Bootstrap 5 Navbar 激活状态动态添加教程

本文档旨在指导开发者如何在 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();
});

代码解释：

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

1. $('.navbar-nav .nav-item a'): 选择器选取所有导航栏中的链接。
2. .click(function(e) { ... }): 为每个链接绑定点击事件处理函数。
3. $('.navbar-nav .nav-item a').removeClass('active'): 在点击事件发生时，首先移除所有导航链接的 active 类。
4. var $this = $(this): 将当前点击的链接保存到变量 $this 中。
5. if (!$this.hasClass('active')) { $this.addClass('active'); }: 检查当前链接是否已经有 active 类，如果没有，则添加。
6. // 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";
    });
}

代码解释：

1. document.querySelectorAll("#navigation .navbar-nav .nav-link"): 选择所有导航栏的链接
2. 遍历每个链接，并添加点击事件监听器
3. 点击事件触发时，获取当前激活的元素，并移除 active 类
4. 为当前点击的元素添加 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');
        }
    });
});

代码解释：

1. $(document).ready(function() { ... }): 确保在 DOM 加载完成后执行代码。
2. var currentUrl = window.location.href: 获取当前页面的 URL。
3. $('.navbar-nav .nav-item a').each(function() { ... }): 遍历所有导航链接。
4. var linkUrl = $(this).attr('href'): 获取当前链接的 href 属性值。
5. if (currentUrl.indexOf(linkUrl) > -1) { ... }: 检查当前 URL 是否包含链接的 href 值。如果包含，则认为当前链接对应于当前页面。
6. $('.navbar-nav .nav-item a').removeClass('active'): 移除所有导航链接的 active 类。
7. $(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();

代码解释：

1. 监听窗口的滚动事件
2. 获取滚动条距离顶部的距离
3. 遍历每个 .page-section 元素，并判断元素距离顶部的位置是否小于滚动条距离 + 250
4. 如果小于，则移除所有导航栏链接的 active 类，并为当前遍历到的 .page-section 元素对应的导航栏链接添加 active 类

总结

本文档介绍了多种在 Bootstrap 5 导航栏中动态添加 active 类的方法，包括使用 jQuery 监听点击事件、使用纯 JavaScript 实现类似功能，以及在页面加载时根据 URL 自动设置激活状态。你可以根据你的实际应用场景选择最适合的方法。 记住根据你的 HTML 结构调整选择器，并根据你的应用类型（单页应用或非单页应用）选择是否阻止链接的默认跳转行为。

以上就是Bootstrap 5 Navbar 激活状态动态添加教程的详细内容，更多请关注php中文网其它相关文章！