hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)
例如:
一个URL为:file:///D:/%E5%A6%99%E5%91%B3%E8%AF%BE%E5%A0%82/%E8%AF%BE%E5%A0%82%E6%A1%88%E4%BE%8B/hash.html#div3,
则它的hash值为:#div3
利用hash值可以完成一些内容信息的切换:
获取方式:window.location.hash
结果为:
函数onhashchange可以监听hash值的改变
hash应用举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过hash切换内容</title>
</head>
<body>
<nav>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
</nav>
<p class="info"></p>
<script type="text/javascript">
let data={
div1:"这是div1中的数据",
div2:"这是div2中的数据",
div3:"这是div3的数据"
};
let info=document.querySelector('.info');
window.οnhashchange=toChange;
toChange();
console.log(window.location.hash);
function toChange(){
let hash=window.location.hash;
hash= hash==""?"div1":hash.substr(1);
let infoData=data[hash];
info.innerHTML=infoData;
}
</script>
</body>
</html>
结果:
通过监听hash的改变,可以改变<p>标签中的内容。