BOM中的hash

最新推荐文章于 2021-02-16 11:21:53 发布

天蝎座的文子

最新推荐文章于 2021-02-16 11:21:53 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/qq_34446663/article/details/80385388

版权

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天蝎座的文子

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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值可以完成一些内容信息的切换：获取方式：wind...
复制链接

扫一扫