How do I add 'active' class to the clicked nav link in javascript?

Question

I have a bootstrap navbar and I am trying to use javascript to change which nav link has the active click based on which navlink was clicked. The problem I am having is that when the user clicks a nav link the javscript works fine, but then when the browser navigates to the corresponding page the changes that the javascript made to the HTML is lost.

CODE:

document.querySelectorAll(".nav-item").forEach((link) => {
    link.addEventListener("click", highlightActive, false);
});

function highlightActive(e) {  document.querySelector(".active").classList.remove("active");
 e.target.classList.add("active");
 console.log(`Link clicked: ${e.target}`);
}

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">LCSRanker</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav nav-pills">
            <li class="nav-item active">
                <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/create/predictions">Create</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/show/standings">Standings</a>
            </li>
        </ul>
    </div>
</nav>

Does this answer your question? [Add Active Navigation Class Based on URL](https://stackoverflow.com/questions/20060467/add-active-navigation-class-based-on-url) — S M Iftakhairul, Jul 31 '20 at 18:18

nip · Accepted Answer · 2020-07-31T18:03:20.637

0

~~Add the active class to the correct nav item in each html file.~~

Edit: Since the user commented that he's using EJS and not plain html files, the previous answer is not valid.

You can check the URL when the page loads and add the active class accordingly

edited Jul 31 '20 at 18:03

answered Jul 31 '20 at 17:54

nip

1,609
10
20

Hmm.. The navbar is in a header file that I include on every page using ejs. Would I just take it out of the header then and include the navbar on each page separately? – javathebean Jul 31 '20 at 17:58
@javathebean that is an important detail.. either check the page url on load using js, or pass a variable from Nodejs. – nip Jul 31 '20 at 17:59

How do I add 'active' class to the clicked nav link in javascript?

1 Answers1