javascript - 当 URL 中的哈希值发生变化时，使用 JS/jQuery 更改 CSS

Question

我在一个页面上有 6 个 100vw 和 100vh div 以及一个右对齐的固定导航栏。

这些 div 中的每一个都有一个从 1 到 6 的 id#

导航栏 有 6 个列表项链接，指向 div 的 id，

例如:

<ul>
    <li id="list-item-1"><a href="#1"></a></li>
    <li id="list-item-2"><a href="#2"></a></li>
    <li id="list-item-3"><a href="#3"></a></li>
    <li id="list-item-4"><a href="#4"></a></li>
    <li id="list-item-5"><a href="#5"></a></li>
    <li id="list-item-6"><a href="#6"></a></li>
</ul>

我正在使用 scroll spy 很好地“滚动”到目标 div。

这很好地将 id 值放在了 ur 中。

例如:

我的网站.com/#1或者我的网站.com/#2等等

然而，我想做的是如果 url 包含#1 或#2 或者它可能是的任何数字，列表元素背景改变颜色。

我最初尝试了一个事件/非事件类，但是，这是在滚动和单击上完成的，因此单击的监听器并不总是有效。

我在这里看到了以前问题中的很多例子，但是我能得到的最接近的例子是这样的:

function locationChange() {
 if(location.hash == "#1") {
   $('#list-item-1').css('background-color', '#333333');
   $('#list-item-2').css('background-color', '#333333');
 } else {
   $('#list-item-1').css('background-color', '#ffffff');
   $('#list-item-2').css('background-color', '#ffffff');
 }
);
window.addEventListener("hashchange", locationChange(), false);

使用上面的代码，页面有时会加载列表项 1，这很好，它会在页面加载时选择 #1，但是当我单击或滚动页面时，其他人没有被捡到。

(我在上面只提供了少量，我的实际代码将其应用于所有列表项。)

任何帮助/建议/示例代码将不胜感激。

Answer 1

在没有工作示例的情况下，我认为问题出在这一行中:

window.addEventListener("hashchange", locationChange(), false);

添加监听器是正确的做法，但您在定义监听器时调用了您的函数。将 locationChange() 更改为 locationChange 不会立即调用函数，而是将句柄传递给函数:

function locationChange() {
 if(location.hash == "#1") {
   $('#list-item-1').css('background-color', '#333333');
   $('#list-item-2').css('background-color', '#333333');
 } else {
   $('#list-item-1').css('background-color', '#ffffff');
   $('#list-item-2').css('background-color', '#ffffff');
 }
);
window.addEventListener("hashchange", locationChange, false);