Html 锚定/伪URL隐藏/显示CSS问题

我正在尝试单页网站。然而，我已经到了一个被卡住的地步

我使用锚和：target伪类来获得一个看起来像普通网站的网站。我通过使用切换到display:block/none的div来实现这一点

显示问题的我的缩减代码：

函数showIndex（）{
document.getElementById（“Index”）.style.display=“block”；
}
函数hideIndex（）{
document.getElementById（“Index”）.style.display=“无”；
}

#导航，#内容{
填充：10px；
利润率：0.20px0；
}
.导航按钮{
浮动：左；
宽度：50px；
背景颜色：蓝色；
填充物：5px；
裕度：0 10px 0 0；
颜色：白色；
}
.contentBox{
浮动：清晰；
宽度：400px；
边框：1px纯蓝色；
填充物：5px；
}
#A、 #B#C{
显示：无；
}
#A:目标，B:目标，C:目标{
显示：块；
}

这是页面：索引
这是一页：A
这是第二页
这是页面：C

实现这一点的一种方法是使用

hashchange

事件。当然，有了它，您还需要删除显示和隐藏内联事件侦听器

window.addEventListener("hashchange", function (e) {
  let hash = location.hash.slice(1) || "Index";
  document.querySelectorAll(".contentBox").forEach((el) => {
    el.style.display = el.id === hash ? "block" : "none";
  });
});

只需将其添加到脚本标记中。它将在加载时运行一次，然后在每次哈希更改时运行。如果哈希为空，它将显示索引。否则，它将尝试显示id与哈希匹配的元素。唯一的问题是，如果目标是“#V”，而您没有id为

V

的

.contentBox

，它将不会显示任何内容。通过测试循环后是否有任何可见的

.contentBox

，您可以很容易地解决这个问题，但我将把它留给您来解决

编辑：我本以为这也会捕获页面刷新，但如果您想覆盖每个基本页面，您可以这样做：

function hideHash(){
    let hash = location.hash.slice(1) || "Index";
  document.querySelectorAll(".contentBox").forEach((el) => {
    el.style.display = el.id === hash ? "block" : "none";
  });
}
window.addEventListener('load',function(){
  hideHash();
  window.addEventListener("hashchange",hideHash);
});

---

这将在加载事件期间为hashChange添加事件侦听器，在加载事件期间触发一次之后。这样做可以防止它在页面加载时意外触发两次，这可能会导致一些闪烁。注意-如果您注意到页面加载时闪烁，您可以将第二个事件侦听器包装在

setTimeout

函数中，因为

hashChange

在

load

之后触发，从理论上讲，它可能在加载期间仍会被调用，而不会引入延迟。

这几乎完美！到目前为止，它只解决了一个小问题，如果我已经打开index.php#a并使用站点刷新（ctrl+R），它将显示索引框而不是框a。你知道解决方案吗？不过我已经实现了。@tacoshy-您可以添加一个onload事件处理程序来完成同样的事情。请参阅我的编辑。