根据无需重新加载页面加载的 URL 隐藏/显示 div
Posted
技术标签:
【中文标题】根据无需重新加载页面加载的 URL 隐藏/显示 div【英文标题】：Hide/ Show div based on URL that loads without page reload 【发布时间】：2015-12-21 15:27:34 【问题描述】：我有一个网站，其中的菜单是这样的，新页面/网址会随着页面重新加载而加载。
我正在尝试使用以下代码隐藏一个 div - 这在页面重新加载时有效，但在 url 在没有重新加载页面的情况下更改时不起作用。
$(function()
if (window.location.hash == "#home")
$('.axiosnext-arrow').hide();
else
$('.axiosnext-arrow').show();
);
【问题讨论】：
这可能会有所帮助：link 相关代码仅在您重新加载页面时有效。您需要在更改特定事件的 URL 时使用此代码 @NishitMaheta 那么我如何使它在更改或 url 上起作用 @user38208 看我的回答 【参考方案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
【讨论】：
以上是关于根据无需重新加载页面加载的 URL 隐藏/显示 div的主要内容，如果未能解决你的问题，请参考以下文章
html 使用AJAX根据邮政编码检索和显示（无需重新加载页面）人员参议员