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

Question

我正在尝试确定 <div>当 url 具有特定哈希值时显示。到目前为止，当我从不同页面导航时它可以工作，但当我从同一页面单击时它不起作用。

示例:如果我在第1页，点击转到/page2#hash1然后div1链接到 hash1 将显示在 page2 上(所有 <div> 最初都是隐藏的)。但如果 url 当前是 /page2#hash1我想跳到#hash2在同一页面上，网址将更改为 /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();
        }

}

JSFiddle照顾@HaukurHaf