哈希（不刷新页面，展示不同模板）

最新推荐文章于 2024-01-09 16:53:22 发布

羽筠

最新推荐文章于 2024-01-09 16:53:22 发布

阅读量1.5k

点赞数

分类专栏： HTML + CSS + JS

本文链接：https://blog.csdn.net/qq_16494241/article/details/51396126

版权

HTML + CSS + JS 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

简单的哈希路由，不刷新页面，根据哈希值，展示不同模板

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
html , body{ height:100%;}
body{ background-color:#f3f3f3;}
nav{ width:100%; height:60px; background-color:green; text-align:center; position:absolute; left:0; top:0;}
nav a{ display:inline-block; padding:0 10px; height:60px; line-height:60px; color:#fff; vertical-align:middle; text-decoration:none;}

#test{ width:800px; height:400px; line-height:400px; margin:0 auto; text-align:center; font-size:36px; border:#e1e1e1 solid 1px; border-radius:5px; background-color:#fff; overflow-y:auto; position:fixed; left:0; right:0; top:50%; margin-top:-200px;}

.type1{ color:#06F;}
.type2{ color:#CC9;}
.type3{ color:#93F;}
.default{ color:#603;}
</style>
<script type="text/javascript" src="jquery2.1.js"></script>
</head>

<body>

<nav>
	<a href="#">点我展示默认模板</a>
	<a href="#dfdsf">点我展示默认模板</a>
	<a href="#type1">点我展示默认模板一</a>
	<a href="#type2">点我展示默认模板二</a>
	<a href="#type3">点我展示默认模板三</a>
</nav>

<div id="test">对应模板内容加载在这里哦~~~</div>

<script id="type1" type="text/html">
	<div class="type1">我是默认模板一~~~~</div>
</script>
<script id="type2" type="text/html">
	<div class="type2">我是默认模板二~~~~</div>
</script>
<script id="type3" type="text/html">
	<div class="type3">我是默认模板三~~~~</div>
</script>
<script id="default" type="text/html">
	<div class="default">我是默认模板~</div>
</script>
<script type="text/javascript">
$(function(){
	var hashMsg = location.hash;
	hashPage(hashMsg);
	$(window).on('hashchange', function (e) {
		hashMsg = location.hash;
		hashPage(hashMsg);
	})
});
function hashPage(hashMsg){
	var hashArr = ['#type1','#type2','#type3'];
	var demo = $('#test');
	hashMsg = hashArr.indexOf(hashMsg) > -1 ? hashMsg : '#default';
	demo.html($(hashMsg).html());
	//demo.append($(hashMsg).html());
}
</script>
</body>
</html>