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

【问题标题】：Hide/ Show div based on URL that loads without page reload根据无需重新加载页面加载的 URL 隐藏/显示 div
【发布时间】：2025-12-03 22:10:01
【问题描述】：

我有一个网站，其中的菜单是这样的，新页面/网址会随着页面重新加载而加载。

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

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

【问题讨论】：

这可能会有所帮助：link
相关代码仅在您重新加载页面时有效。您需要在更改特定事件的 URL 时使用此代码
@NishitMaheta 那么我如何使它在更改或 url 上起作用
@user38208 看我的回答

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

onhashchange 事件在当前 URL 的锚部分（以“#”符号开头）发生更改时发生。

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();
     }
  });
});

【讨论】：

【解决方案3】：

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

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

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

<body onhashchange="myFunction()">

要了解更多关于onhashchange事件，请查看W3Schools

【讨论】：