Javascript 使用jquery切换引导活动导航链接

我正在尝试合并一个jquery函数来自动更改Bootsrap导航栏中

nav

链接的活动状态。我有一个基础HTML文件，它扩展为一个特定于应用程序的基础文件。然后，该文件将扩展到由

导航栏导航的各个页面

以下是特定于应用程序的HTML：

{% extends "base.html" %}
{% load static %}

{% block css %}
  <link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}

{% block js %}
  <script>
    $(function() {
       $("#home-navs").click(function() {
          // remove classes from all
          $("#home-navs").removeClass("active");
          // add class to the one we clicked
          $(this).addClass("active");
       });
    });

  </script>
{% endblock js %}

{% block content %}
  <br>

  <div class="container status-update">
    <div class="container">
      <form>
        <div class="input-group-lg">
          <input type="text" class="form-control" value="What's new?">
        </div>
        <br style="height:20px">
        <button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
      </form>
    </div>
  </div>

  <br>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav">
          <a class="nav-link active" id="home-navs" href="{% url 'home' %}">Activity Feed</a>
          <a class="nav-link" id="home-navs" href="{% url 'vehicle-updates' %}">Vehicle Updates</a>
          <a class="nav-link" id="home-navs" href="/space.html">Garage Updates</a>
        </div>
      </div>
    </nav>
  </div>

页面和链接工作正常，当我单击不同的链接时，我无法更改
导航栏上的
活动状态。我不知道我是否在函数中引用了错误的项，或者是什么。任何指导都将不胜感激。谢谢大家!
 不能对多个dom元素使用ID。改用类

尝试将其更改为：

  $(".nav-link").click(function() {
      // remove classes from all
      $(".nav-link").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });

如果您想将其范围仅限于特定导航的元素，请将id放入导航本身，然后使用选择器：
$（“#main nav.nav link”）
，谢谢您的回复。我试过你的建议，但还是没能奏效。奇怪的是，当我点击其中一个链接时，它似乎会在返回到第一个默认状态之前短暂跳转到
active
状态。如果我从第一个链接中删除默认的
active
状态，似乎没有任何变化。不知道下一步该去哪里。它是否与
脚本的位置有关？
  $(".nav-link").click(function() {
      // remove classes from all
      $(".nav-link").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });