index.php
<html>
<head>
<title>My Title</title>
<script type="text/javascript">
function getLink(data) {
document.getElementById("box").innerHTML="This is "+data;
}
</script>
</head>
<body>
<a href="#home" onClick="getLink('Home')">Home</a><br />
<a href="#profile" onClick="getLink('Profile')">Profile</a><br />
<a href="#message" onClick="getLink('Message')">Message</a><br />
<a href="#setting" onClick="getLink('Setting')">Setting</a><br />
<hr />
<div id="box"></div>
</body>
</html>
输出
首页
简介
消息
设置
这是家
正如代码所说，当我单击任何一个 link 时，我的 Div 内容会更新，但问题是当用户通过单击 返回 浏览器的后退按钮 我的 Div 的内容没有改变。
我希望用户 Goes Back、Goes Forward 或他直接将路径放入 地址栏 www.**** */index.php#profile 我的 Div 的内容应该改变。
注意
我使用 document.location.hash 来获取 hash 的值，如下所示:
<head>
<script>
var hashValue=document.location.hash;
alert(hashValue);
</script>
</head>
但它仅在用户返回然后刷新页面
请帮助我如何实现这个:(
最佳答案
你需要使用hashchange事件:
function hash_changed() {
var data = document.location.hash.substr(1);
var box = document.getElementById("box");
if (data) {
// inner page
box.innerHTML="This is " + data;
}
else {
// homepage
box.innerHTML = "";
}
}
window.onhashchange = function () {
hash_changed();
};
window.onload = function () {
hash_changed();
};
此外，当您使用 hashchange 事件时，还有
无需为您的链接设置 onclick:
<a href="#home">Home</a>
<a href="#profile">Profile</a>
<a href="#message">Message</a>
<a href="#setting">Setting</a>
当用户点击一个链接时，hash 会自动改变(通过链接的 href 属性)，
和 hashchange 事件被触发。
检查 DEMO在这里。
第一次
当用户第一次使用哈希访问您的页面时:
http://fiddle.jshell.net/B8C8s/9/show/#message
我们必须显示想要的页面(这里是message)，所以我们必须运行hash_changed()函数
我们在上面声明，第一次。为此，我们必须等待 DOM 就绪或 window.onload。
关于javascript - 我需要在 URL 中使用 anchor (#) 来更新我的页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16895951/