Bootstrap 5 Navbar 激活状态动态切换教程

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

代码解释：

Swapface人脸交换

一款创建逼真人脸交换的AI换脸工具

45

查看详情

1. $(document).ready(function() { ... });：确保在文档加载完成后执行代码。
2. window.location.href：获取当前页面的完整 URL。
3. $('.navbar-nav .nav-item a').each(function() { ... });：遍历导航栏中所有带有 nav-link 类的 <a> 标签。
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 类的方法：页面加载时激活、点击激活和滚动激活。开发者可以根据自己的项目需求选择合适的方法，或者将它们结合起来使用，以实现最佳的导航体验。 在实际应用中，请根据具体情况调整代码，并注意代码的可维护性和可扩展性。

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