如何使用jquery将bootstrap 4 nav项添加到活动类

使用jQuery将Bootstrap 4导航项添加到活动类的方法如下：

首先，确保你已经引入了jQuery和Bootstrap的相关文件。可以通过以下方式在HTML文件中引入它们：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

在HTML文件中，创建一个导航栏，并为每个导航项添加一个唯一的ID。例如：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a 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" id="home">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item" id="about">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item" id="services">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item" id="contact">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

在JavaScript代码中，使用jQuery选择器选中要添加活动类的导航项，并使用addClass()方法添加active类。例如，如果要将"Home"导航项设置为活动项，可以使用以下代码：

$(document).ready(function() {
  $("#home").addClass("active");
});

最后，确保在页面加载完成后调用JavaScript代码。可以使用$(document).ready()函数来实现。这样，当页面加载完成时，jQuery代码将被执行。

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 Nav项添加活动类</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a 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" id="home">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item" id="about">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item" id="services">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item" id="contact">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <script>
    $(document).ready(function() {
      $("#home").addClass("active");
    });
  </script>
</body>
</html>

这样，当页面加载完成时，"Home"导航项将被设置为活动项，并显示为选中状态。

腾讯云相关产品和产品介绍链接地址：