javascript - 为什么 url 更改时 div 不显示？

Question

<div>当 url 具有某个哈希值时，我试图让某些s 显示出来。到目前为止，当我从不同的页面导航时它可以工作，但当我从同一页面单击时它不起作用。

示例：如果我在 page1 上并单击转到/page2#hash1然后div1链接到 hash1 将显示在 page2 上（所有<div>' 最初都是隐藏的）。但是，如果 url 当前是/page2#hash1并且我想跳转到#hash2同一页面上，则 url 将更改为/page2#hash2但div2不会显示并且div1不会消失。

这是我尝试使用的代码：

if (window.location.href.indexOf('#hash1') > -1){
    $('.div1').slideToggle();
} else if(window.location.href.indexOf('#hash2') > -1 ) {
    $('.div2').slideToggle();
}

Answer 1

使用 onhashchange 事件触发你的函数

window.onhashchange  = function(){
  if (window.location.href.indexOf('#hash1') > -1){
            $('.div1').slideToggle();
        }
        else if(window.location.href.indexOf('#hash2') > -1 ) {
            $('.div2').slideToggle();
        }

}

@HaukurHaf的 JSFiddle 照顾