单页 hash 跳转

最新推荐文章于 2022-08-20 17:01:24 发布

MoveLikeRabbit

最新推荐文章于 2022-08-20 17:01:24 发布

阅读量909

点赞数 1

分类专栏： javaScript 文章标签： hash javascript

本文链接：https://blog.csdn.net/MoveLikeRabbit/article/details/78061463

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单页hash跳转</title>
</head>
<body>
<script>
window.addEventListener("DOMContentLoaded", function(){
	//DOM树构建完成后执行下面的代码
	
	function router(option){
		var hash = location.hash.slice(1) || "/";
		option[hash]();
	} 

	function on(events,callback){
		var ev = events.split(' ');
		for(var i in ev){
			window.addEventListener(ev[i],callback)
		}
	}
	var content = document.querySelector('.content');

	// 刷新文档 或hash改变的时候调用 router 函数
	on('load hashchange',function(){router({

			"/":function(){
				content.innerHTML = "home";
			},
			"/about":function(){
				content.innerHTML = "about us";
			},
			"/news":function(){
				content.innerHTML = "news";
			},
			"/product":function(){
				content.innerHTML = "product";
			}
		})
	})
})
</script>
	<div class="container">
		<nav class="nav">
			<a href="#/">home</a>
			<a href="#/news">news</a>
			<a href="#/product">product</a>
			<a href="#/about">about us</a>
		</nav>
		<div class="content">
			
		</div>
	</div>
<style>
	.container{
		width: 960px;
		min-height: 400px;
		background: #eee;
		margin: 0 auto;
		border-radius: 15px;
		overflow: hidden;
	}
	.nav{
		width: 100%;
		height: 80px;
		line-height: 80px;
		background: #ccc;	
		text-align: center;
	}
	.nav a{
		margin:0 20px; 
	}
	.content{
		text-align: center;
		font-size: 60px;
		font-weight: bold;
		padding: 50px;
	}
</style>
</body>
</html>

MoveLikeRabbit

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
单页 hash 跳转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单页hash跳转</title></head><body><script>window.addEventListener("DOMContentLoaded", function(){ //DOM树构建完成后执行下面的代码
复制链接

扫一扫