Solution 1 :

You can’t use ids for multiple dom elements. Use classes instead.

Try to change it to this:

  $(".nav-link").click(function() {
      // remove classes from all
      // add class to the one we clicked

And if you want to scope it to only elements of a specific nav put the id in the nav itself and then use selector: $("#main-nav .nav-link")

Problem :

I am trying to incorporate a jquery function to automatically change the active status of the nav links in my Bootsrap Navbar. I have a base HTML file which extends into an app-specific base file. That file is then extended to the individual pages navigated by the navbar.

Here is the app-specific HTML:

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

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

{% block js %}
    $(function() {
       $("#home-navs").click(function() {
          // remove classes from all
          // add class to the one we clicked

{% endblock js %}

{% block content %}

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


  <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>

And then I have this in the head of my primary base.html file:

{% load static %}

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    {% block css %}{% endblock css %}

    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/infinite.min.js' %}"></script>
    {% block js %}{% endblock js %}


The page and links works just fine, I just can’t get the active status on the navbar to change when I click the different links. I don’t know if I am referencing the items in the function wrong, or what. Any guidance would be much appreciated. Thank you!


Comment posted by tsmith41094

Thanks for the reply. I tried your suggestion and I still can’t get it to work. It’s weird, when I click one of the links it seems to bounce over to