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

在浏览

剃须刀页面时，我需要更改导航栏链接的颜色。我尝试使用
JavaScript
，但似乎每次我转到另一个页面时，页面都会被重新引用，并且我无法
切换我的元素

以下是我迄今为止所尝试的：

导航条链接

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

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

在这里，我将当前的
活动链接
保存在我的
js
中，当我导航到另一个页面时，该页面将被重新链接，并且我的
js
文件将被重新加载，以便将我以前的值设置回默认的
活动链接

我所拥有的：

我想要的是：

我找到了一个，但它似乎有点硬编码和周围的工作，我相信应该有一个更好的方法

另外，理想情况下，使用
JavaScript
的解决方案将是最好的，但是，我不坚持这里的任何内容。
使用
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');
        }
    });
})

您正在使用一些前端框架吗？或者是普通的HTML和JS，其中标题在每个实现的HTML页面中？嗯，我使用默认的UI设置，即
bootstrap
，还有
jquery
，但是对于这个问题，我使用的是纯js，因为我只是随便玩玩，想看看它对我即将到来的项目有什么作用，这样我就可以决定是继续使用纯js还是其他东西了。