CODEWITHSUNDEEP
javascripthtmlcss
Ярослав Демцюх
Ярослав Демцюх

Reputation: 47

Navbar items don't highlight in my JS code

I'm trying to highlight my navbar items for whichever page the user is currently on, the logic seems alright but it doesn't work: Here's my base navbar that is connected to 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>

here's the CSS that makes the current href appear red upon adding a class to tag:

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

and this is the JavaScript code:

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');
            });
        });
}

Upvotes: 0

Views: 37

Answers (3)

Ярослав Демцюх
Ярослав Демцюх

Reputation: 47

Thanks everyone i got it to work with a different method:

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'
    }
};

Upvotes: 0

devd
devd

Reputation: 703

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

Upvotes: 1

TKoL
TKoL

Reputation: 13912

Your page is refreshing after a click. If you apply a class on a 'click' event in javascript, the element will have that class, but then the page changes and refreshes as if your javascript never run.

You can do that kind of thing server-side. If you DO want it to be based on the 'click' function that you have that, I recommend using 'sessionStorage' to say which nav button was the last clicked. That way, on page refresh, you can check sessionStorage and highlight the current page. Either that or you can use the window.location to determine the current page and highlight from there.

Upvotes: 1

Related Questions