如何将“活动”类添加到 javascript 中单击的导航链接？

Question

我有一个引导导航栏，我正在尝试使用 javascript 根据点击的导航链接更改哪个导航链接具有活动点击。我遇到的问题是，当用户单击导航链接时，javscript 可以正常工作，但是当浏览器导航到相应页面时，javascript 对 HTML 所做的更改会丢失。

代码：

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>

Answer 1

将active 类添加到每个 html 文件中的正确导航项。

编辑：由于用户评论说他使用的是 EJS 而不是纯 html 文件，因此之前的答案无效。

您可以在页面加载时检查 URL 并相应地添加 active 类