BOM中的hash

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.onhashchange=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>标签中的内容。

猜你喜欢

转载自blog.csdn.net/qq_34446663/article/details/80385388
今日推荐