javascript - 基于 url 的隐藏/显示 div 在多 html 页面的第一次加载时不起作用

Question

我已经在 stackoverlow 上查看过，但没有找到我需要的内容。

我正在尝试根据 #url 隐藏和显示一些 DIV，它几乎完成了，但是当您第一次进入该 html 页面(这是一个三个不同页面的网站)时，该功能不起作用。

这里是我使用的函数:

/***************
HIDE BANDS DEPENDING ON THE URL
***************/

// Bind the event.
window.onhashchange = updatebands;


function updatebands() {

if (location.href.match(/projectos.html#bandOne/)){
  $('#bandOne').css("display", "block");
  $('#bandTwo').css("display", "none");
  $('#bandThree').css("display", "none");
} 
if (location.href.match(/projectos.html#bandTwo/)){
  $('#bandOne').css("display", "none");
  $('#bandTwo').css("display", "block");
  $('#bandThree').css("display", "none");
} 
if (location.href.match(/projectos.html#bandThree/)){
  $('#bandOne').css("display", "none");
  $('#bandTwo').css("display", "none");
  $('#bandThree').css("display", "block");
}
};

我也尝试用下面的代码来补充CSS文件，但是当第一次输入时我遇到了同样的问题(这次它全部隐藏而不是全部显示)

.section {
  display: none;
}

我认为这是因为我加载了html并且该功能不起作用，我该如何解决这个问题？

这是我的存储库，其中写有实时页面链接: https://github.com/sebalaini/costanzo

Answer 1

当您第一次进入页面时，window.onhashchange 不会被触发，因此不会运行任何内容。
如果您愿意 - 您还可以使用 window.onload 函数(或者更好地使用 window.addEventListener 来确保您不会覆盖任何内容，并且没有脚本会覆盖您的函数):

window.addEventListener("load", function(event) {
    updatebands()
});

请注意，您仍然需要保留 hashchange 事件:

window.addEventListener("hashchange", function(event) {
    updatebands()
});