javascript - 网址更改时，为什么div不显示？

我试图让某些<div>出现在网址具有特定哈希值的情况下。到目前为止，当我从其他页面导航时，它可以工作，但是当我从同一页面单击时，它不能工作。

示例：如果我在page1上并单击以转到/page2#hash1，则链接到hash1的div1将显示在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();
}

最佳答案

使用onhashchange事件触发您的功能

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

}

JSFiddle @HaukurHaf的照顾