Выделение активной ссылки с помощью Java Script

Совсем недавно начал самостоятельно учиться писать на Django. В планах написать маленький сайт для работы под свои нужды. И ради развития ))). К сути. Имеется такой Navbar:

<div>
  <h3 class="float-md-start mb-0">Название организации</h3>
  <nav class="nav nav-masthead justify-content-center float-md-end">
    <a class="nav-link" href="{% url 'home' %}">Главная</a>
    <a class="nav-link" href="{% url 'pool' %}">Пул адресов</a>
    <a class="nav-link" href="{% url 'drivers' %}">Драйверы</a>
    <a class="nav-link" href="#"></a>
  </nav>

Пытался разобраться как написать JavaScript который выделяет активную страницу, но к сожалению ничего не вышло. Нашел несколько примеров: 1.Рабочий но работает не совсем корректно, выделяет ненужные ссылки.

$(document).ready(function () {
        var url = document.location.toString();
        $("a").filter(function () {
            return url.indexOf(this.href) != -1;
        }).addClass("active");
});

2.Вариант нашел в учебнике, но запустить я его не смог:

$('.nav a').each(function(){
    let location = window.location.protocol + '//' + window.location.host + window.location.pathname;
    let link = this.href;
    if(location == link){
        $(this).parent().addClass('active');
    }
});

Буду рад любой помощи.

Код из учебника не работает, т. к. есть 2 ошибки. Во-первых нельзя назвать пользовательскую переменную location, т.к. это уже существующий в DOM объект. Переименовываем во что-то другое. Например в pageUrl. Тогда можно даже просто вот так написать:

let pageUrl = location.href;

И во-вторых, когда бежим в цикле по найденным ссылкам:

$(this).parent().addClass('active');

То обращение к родителю parent лишнее. Надо так:

$(this).addClass('active');

Весь код в вашем случае будет таким:

$('.nav a').each(function(){
    let pageUrl = location.href;
    let link = this.href;
    if(pageUrl == link){
        $(this).addClass('active');
    }
});
Вернуться на верх