Bootstrap5导航栏激活切换教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《Bootstrap 5 导航栏激活状态切换教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

本文旨在提供一种在 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');
    }
  });
});

代码解释：

1. $(document).ready(function() { ... });：确保在文档加载完成后执行代码。
2. window.location.href：获取当前页面的完整 URL。
3. $('.navbar-nav .nav-item a').each(function() { ... });：遍历导航栏中所有带有 nav-link 类的 标签。
4. $(this).attr('href')：获取当前链接的 href 属性值。
5. currentUrl.indexOf(linkUrl) > -1：检查当前页面的 URL 是否包含链接的 URL。indexOf() 方法返回子字符串在字符串中首次出现的位置，如果未找到则返回 -1。
6. $(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();
});

代码解释：

1. $('.navbar-nav .nav-item a').click(function(e) { ... });：为导航栏中的所有链接绑定点击事件。
2. $('.navbar-nav .nav-item a').removeClass('active');：移除所有链接的 active 类，确保只有一个链接处于激活状态。
3. $(this).addClass('active');：为当前点击的链接添加 active 类。
4. 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();

代码解释：

1. $(window).scroll(function() { ... }).scroll();：绑定窗口滚动事件，并在页面加载时立即执行一次。
2. var distance = $(window).scrollTop();：获取页面滚动的距离。
3. $('.page-section').each(function(i) { ... });：遍历页面中的所有 page-section 元素（假设每个 section 对应一个导航链接）。
4. $(this).position().top：获取当前 section 距离文档顶部的距离。
5. if ($(this).position().top <= distance + 250) { ... }：如果 section 的顶部距离小于或等于滚动距离加上 250 像素（用于调整激活的灵敏度），则执行激活操作。
6. $('.navbar-nav a.active').removeClass('active');：移除当前激活的链接的 active 类。
7. $('.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 类的方法：页面加载时激活、点击激活和滚动激活。开发者可以根据自己的项目需求选择合适的方法，或者将它们结合起来使用，以实现最佳的导航体验。 在实际应用中，请根据具体情况调整代码，并注意代码的可维护性和可扩展性。

本篇关于《Bootstrap5导航栏激活切换教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！