Question

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

这些div中的每个div的ID号均为1-6

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

例如：

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

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

这很好地将id的值放在了您的网址中。

例如：

mywebsite.com/#1 要么 mywebsite.com/#2 等等

但是，我想做的是如果该网址包含#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);

URL中的哈希值更改时，使用JS / jQuery更改CSS

1 个答案: