<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{width: 100%; overflow: hidden; height: 100%;}
aside{
width: 220px;
float: left;
background: #ccc;
height: 100%;
}
article{
margin-left: 220px;
padding-left: 20px;
background: #eee;
overflow: scroll;
}
</style>
</head>
<body>
<aside>
<ul id="list"></ul>
</aside>
<article>
<p id="content"></p>
</article>
<script src="data.js"></script>
<script>
(function(){
var oAside=document.querySelector('#list');
var oArticle=document.querySelector('#content');
for(var title in data){//这里遍历出的title既然直接就成了标题，因为js文件里面直接把title当成了键值
var oLi=document.createElement('li');
oLi.setAttribute('data-title',title);
oLi.innerHTML=title;
oAside.append(oLi);
}
//遍历出元素监听事件
var oLi=document.querySelectorAll('#list>li');
for (var i = 0; i <oLi.length ; i++) {
oLi[i].addEventListener('click',function(){
//console.log(this.getAttribute('data-title'));
//console.log(this.dataset['title']);
//根据标题获取对应内容
//console.log(data[title]);
var title=this.dataset['title'];
oArticle.innerHTML=data[title];
// 操作历史记录
if (window.history && history.pushState) {
// 添加一个新的历史记录
history.pushState(title, 'title没有任何浏览器支持', '?t=' + title);
} else {
console.log('不支持');
}
});
}
// 当我们在伪造的访问历史中前进或后退时会执行一个popstate事件
window.addEventListener('popstate', function(e) {
content.innerHTML = data[e.state];
});
})();
</script>
</body>
</html>
data.js文件见上一篇文章。