<body>
<div class="box">
<ul data-a='abc' class="list-wrapper">
</ul>
<p class="text"></p>
</div>
<script src="data.js"></script>
<script>
let list = document.getElementsByClassName('list-wrapper')[0];
let text = document.getElementsByClassName('text')[0];
let frag= document.createDocumentFragment()
for (const key in data) {
let aLi = document.createElement('li')
aLi.innerHTML = key
aLi.setAttribute('data-a', key)
aLi.onclick = function(){
text.innerHTML = data[this.dataset['a']]
// 解码 防止出现乱码
let str = decodeURIComponent(this.dataset['a'])
// 判断一下有没有history 且 有pushState这个函数
if(window.history && window.history.pushState){
// pushState(数据，标题（还没实现），地址) 把数据pushState到历史记录里
window.history.pushState(this.dataset['a'], '历史',`#a=${this.dataset['a']}`)
}
}
frag.appendChild(aLi)
}
list.appendChild(frag)
// 监听浏览器左上角返回按钮
window.onpopstate = function(e){
text.innerHTML = data[e.state]
}
</script>
</body>
Animation.gif
网友评论