<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li><a href="#/aaa">AAA</a></li>
<li><a href="#/bbb">BBB</a></li>
<li><a href="#/ccc">CCC</a></li>
</ul>
<div id="container"></div>
</body>
<script>
var div = document.getElementById('container');
window.onhashchange = function(){
var hash = location.hash;
switch(hash){
case '#/aaa':
div.innerHTML = '这是页面一的内容'
break;
case '#/bbb':
div.innerHTML = '这是页面二的内容'
break;
case '#/ccc':
div.innerHTML = '这是页面三的内容'
break;
}
}
</script>
</html>
总结:
获取路径值 var hash = location.hash;
当路径发生变化时,触发window.onhashchange = function(){}
使用switch...case...进行匹配