代码之家 › 专栏 › 技术社区 › Ashley Redman BSc

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

addeventlistener wordpress css jquery javascript

Ashley Redman BSc · 技术社区 · 7 年前

我有6个 100vw 和 100vh

每个分区都有一个1-6的id

导航栏 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>

这很好地放置了 身份证件

例如:

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

url包含 #1 或 #2

我最初尝试了一个active/not-active类,但是,这是在滚动和单击上完成的,因此单击的侦听器并不总是工作的。

我在前面的问题中看到了不少例子,但最接近的例子是:

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 但是,在页面加载时,当我单击或滚动页面时,其他页面不会被拾取。

(我只提供了上面的一小部分,我的实际代码将此应用于所有列表项。)

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

1 回复 | 直到 7 年前

Mike 7 年前

如果没有一个有效的例子,我相信问题就在这一行:

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

推荐文章