Bootstrap jQuery 切换导航栏 active

引言

在前端开发中，导航栏是一个非常常见的组件，它用于指示用户当前所处的页面或导航链接的状态。在 Bootstrap 框架中，通过添加 active 类来实现导航栏的状态切换。而借助 jQuery，我们可以更加灵活地控制导航栏的切换效果。本文将介绍如何使用 Bootstrap 和 jQuery 来切换导航栏的 active 状态，并提供代码示例。

Bootstrap 导航栏

导航栏是网站或应用程序中的常见组件，用于导航和链接到其他页面或功能。Bootstrap 提供了一个简洁、易用的导航栏组件，可以轻松地创建导航栏。下面是一个简单的 Bootstrap 导航栏示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a rel="nofollow" class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a rel="nofollow" class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a rel="nofollow" class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a rel="nofollow" class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a rel="nofollow" class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

以上代码定义了一个包含 Logo、菜单项和导航栏切换按钮的导航栏。其中，.nav-item 类用于定义菜单项，.active 类用于定义当前激活的菜单项。

jQuery 切换导航栏 active

使用 Bootstrap 的导航栏组件，我们可以很容易地切换导航栏的 active 状态。但有时候我们需要更加灵活地控制导航栏的切换效果，这时可以借助 jQuery 来实现。

首先，我们需要引入 jQuery 库和 Bootstrap 的 JavaScript 插件。在 <head> 标签中添加以下代码：

<script src="
<script src="

接下来，我们可以使用 jQuery 来监听导航栏菜单项的点击事件，并在点击时切换 active 状态。下面是一个示例代码：

<script>
$(document).ready(function() {
  $('.nav-item').click(function() {
    $('.nav-item').removeClass('active'); // 移除所有菜单项的 active 类
    $(this).addClass('active'); // 给点击的菜单项添加 active 类
  });
});
</script>

以上代码使用了 jQuery 的 click 方法来监听导航栏菜单项的点击事件。在点击事件发生时，我们先移除所有菜单项的 active 类，然后给点击的菜单项添加 active 类。

现在，当用户点击导航栏的菜单项时，对应的菜单项将会显示为激活状态。

示例应用

下面是一个完整的示例应用，展示了如何使用 Bootstrap 和 jQuery 切换导航栏的 active 状态：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bootstrap jQuery 切换导航栏 active</title>
  <link rel="stylesheet" href="
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a rel="nofollow" class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar