在 ASP.NET Core Razor 页面中使用 JavaScript 更改活动导航栏链接

Question

当我浏览我的Razor-Pages. 我尝试使用JavaScript，但似乎每次当我转到另一个页面时页面都会重新呈现，并且我无法使用toggle我的元素。

这是我到目前为止所尝试过的：

导航栏链接

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between ml-5">
                 <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link active-link" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Movies/Index">Movies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-page="/Genres/Index">Genres</a>
                    </li>
                </ul>
</div>

站点.js

const links = document.querySelectorAll('.nav-link');
let currentActive = document.querySelector('.active-link');

const changeClass = (e) => {
    //e.preventDefault();
    currentActive.classList.remove('active-link');
    e.target.classList.add('active-link');
};

links.forEach((el) => el.addEventListener('click', changeClass));

在这里，我将当前值保存active link在 my 中js，当我导航到另一个页面时，该页面将重新呈现，并且我的js文件将再次重新加载，以便我之前的值设置回默认值active link。

我拥有的：

我想要的是：

我找到了一个可能的解决方案，但似乎需要一些硬编码和解决方法，我相信应该有更好的方法。

PS 理想情况下，使用的解决方案JavaScript是最好的，但是，我在这里不坚持任何内容。

Answer 1

使用该DOMContentLoaded事件而不是单击事件。这样，更改将在渲染后应用于实际页面。目前，您正在将更改应用到您正在导航的页面上的链接：

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.nav-link').forEach(link => {
        if (link.getAttribute('href').toLowerCase() === location.pathname.toLowerCase()) {
            link.classList.add('active-link');
        } else {
            link.classList.remove('active-link');
        }
    });
})