Элементы навигационной панели не выделяются в моем коде JS

Question

Я пытаюсь выделить элементы своей панели навигации для той страницы, на которой в данный момент находится пользователь, логин c кажется нормальным, но не работает: Вот моя базовая панель навигации, подключенная ко всем страницам:

    <nav class="navbar-container">
        <ul class="navbar-top">
            <li><a class="nav-l" href="{{ url_for('home') }}">Home</a></li>
            <li><a class="nav-l" href="{{ url_for('gallery') }}">Gallery</a></li>
            <li><a class="nav-l" href="{{ url_for('prices_delivery') }}">Prices and Delivery</a></li>
            <li><a class="nav-l" href="{{ url_for('contacts') }}">Contacts</a></li>
        </ul>
    </nav>

вот CSS, который делает текущий href красным при добавлении класса к тегу :

.navbar-top .current {
    color: red;
}

, а это код JavaScript:

function navbarHighlight() {
    let navLinks = document.querySelectorAll('.nav-l');

    navLinks.forEach(navLink => {
        navLink.addEventListener('click', function() {
                navLinks.forEach(navLink => navLink.classList.remove('current'));
                navLink.classList.add('current');
            });
        });
}

Answer 1

(function navbarHighlight() {
    let navLinks = document.querySelectorAll('.nav-l');

    navLinks.forEach(navLink => {
        navLink.addEventListener('click', function() {
                navLinks.forEach(navLink => navLink.classList.remove('current'));
                navLink.classList.add('current');
            });
        });
})()

.navbar-top .current {
    color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-container">
        <ul class="navbar-top">
            <li><a class="nav-l" href="#">Home</a></li>
            <li><a class="nav-l" href="#">Gallery</a></li>
            <li><a class="nav-l" href="#">Prices and Delivery</a></li>
            <li><a class="nav-l" href="#">Contacts</a></li>
        </ul>
    </nav>

Answer 2

Ваша страница обновляется после клика. Если вы примените класс к событию 'click' в javascript, элемент будет иметь этот класс, но затем страница изменится и обновится, как если бы ваш javascript никогда не запускался.

Вы можете сделать это вещи на стороне сервера. Если вы ДЕЙСТВИТЕЛЬНО хотите, чтобы это было основано на имеющейся у вас функции «click», я рекомендую использовать sessionStorage, чтобы указать, какая кнопка навигации была нажата последней. Таким образом, на странице refre sh вы можете проверить sessionStorage и выделить текущую страницу. Либо так, либо вы можете использовать window.location, чтобы определить текущую страницу и выделить оттуда.

Answer 3

Спасибо всем, у меня есть возможность работать другим методом:

const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length;

for (let i=0; i< menuLength; i++) {
    if (menuItem[i].href === currentLocation){
        menuItem[i].className = 'current'
    }
};