Question

我有一个网站，菜单是这样的，新页面/网址加载页面重新加载。

我正在尝试使用以下代码隐藏div - 这在页面重新加载时有效，但在URL没有页面重新加载时更改时不起作用。

$(function(){
    if (window.location.hash == "#home") {
        $('.axiosnext-arrow').hide();
    } else {
        $('.axiosnext-arrow').show();
    }
});

Answer 1

如果您在全局窗口上使用hashchange，它将起作用，请参阅下面的示例

$(window).on('hashchange', function () {
    if (window.location.hash == "#home") {
       $('.axiosnext-arrow').hide();
    } else {
       $('.axiosnext-arrow').show();
    }
});

Answer 2

当当前网址的锚点部分（以＆＃39;＃＆＃39;符号开头）发生更改时，会发生onhashchange事件。

<强> hashchange Event

window.addEventListener("hashchange", hashChangeFunction);

function hashChangeFunction() {
  if (window.location.hash == "#home") {
    $('.axiosnext-arrow').hide();
  } else {
    $('.axiosnext-arrow').show();
  }
}

使用JQuery

$(function(){
  if (window.location.hash == "#home") {
    $('.axiosnext-arrow').hide();
  } else {
    $('.axiosnext-arrow').show();
  }

  $(window).on('hashchange', function () {
     if (window.location.hash == "#home") {
       $('.axiosnext-arrow').hide();
     } else {
       $('.axiosnext-arrow').show();
     }
  });
});

Answer 3

您必须将您的功能分配给onhashchange事件。你的javascript：

function myFunction() {
  if (window.location.hash == "#home") {
    $('.axiosnext-arrow').hide();
  } else {
    $('.axiosnext-arrow').show();
  }
}

然后，在您的HTML上，执行以下操作：

<body onhashchange="myFunction()">

要详细了解onhashchange事件，请查看W3Schools

根据加载的URL隐藏/显示div，无需重新加载页面

3 个答案: