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类

如何在JavaScript的单击的导航链接中添加“活动”类？

1 个答案: