|
|
@@ -39,14 +39,14 @@
|
|
|
<body>
|
|
|
<div class="box">
|
|
|
<ul>
|
|
|
- <li class="active">first</li>
|
|
|
- <li>second</li>
|
|
|
- <li>thrid</li>
|
|
|
+ <li class="active" data-id="1001">first</li>
|
|
|
+ <li data-id="1002">second</li>
|
|
|
+ <li data-id="1003">thrid</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<script>
|
|
|
+ // 获取元素
|
|
|
var lis = document.querySelectorAll("li");
|
|
|
-
|
|
|
// 循环绑定事件
|
|
|
for(var i=0;i<lis.length;i++){
|
|
|
lis[i].onclick = function(){
|
|
|
@@ -54,6 +54,30 @@
|
|
|
lis[j].classList.remove("active");
|
|
|
}
|
|
|
this.classList.add("active");
|
|
|
+ // 使用history模式添加历史记录
|
|
|
+ console.log(this);
|
|
|
+ var thisId = this.dataset.id;
|
|
|
+ history.pushState(thisId,"");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 监听历史记录变化 onpopstate
|
|
|
+ window.onpopstate = function () {
|
|
|
+ console.log(history.state)
|
|
|
+ if(history.state){
|
|
|
+ console.log("有历史")
|
|
|
+ }else{
|
|
|
+ console.log("无历史");
|
|
|
+ lis[0].classList.add("active")
|
|
|
+
|
|
|
+ }
|
|
|
+ var thisId = history.state;
|
|
|
+ for(var i=0;i<lis.length;i++){
|
|
|
+ if(thisId == lis[i].dataset.id){
|
|
|
+ lis[i].classList.add("active");
|
|
|
+ }else{
|
|
|
+ lis[i].classList.remove("active");
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
