I'm attempting to emphasize the navbar items for each page that the user is currently viewing, although my code logic seems correct, it's not functioning as expected. Below is the basic navbar that is consistent across all pages:
<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>
Below is the CSS snippet that changes the color of the current link to red when a certain class is added to the <a> tag:
.navbar-top .current {
color: red;
}
Finally, here is the JavaScript code related to this functionality:
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');
});
});
}