关于js中pushstatepopstate-飞外

简单介绍
1.pushState

history.pushState({state:1}, "title", "#");//三个参数 面返回和前进时触发

js代码

 var arr,divs; init() function init(){ // 当历史前进或者后退时就会收到这个事件 window.onpopstate=popStateHandler; arr=Array.from(document.getElementsByTagName("p")); divs=Array.from(document.getElementsByTagName("div")); arr[0].style.display="block"; for(var i=0;i divs.length;i++){ divs[i]. lickHandler; //遍历每个div标签，点击时触发事件
 var index=divs.indexOf(this); //获取点击元素的下标 // history.pushState({state:1},"","#"+this.innerHTML);  // 在历史记录列表中增加数据，后面的#内容标示当前跳转部分 history.pushState({index:index}, "", "#" +this.innerHTML);//设置url的改变和历史记录 changeMenu(index); //点击后触发改变内容的函数 function popStateHandler(){ console.log(history.state); //打印历史记录 就是pushstate的面返回时触发改变内容的函数 function changeMenu(index){ for(var i=0;i arr.length;i++){ if(i===index){ arr[i].style.display="block"; }else{ arr[i].style.display="none";

html标签

 div 水果 /div  div 蔬菜 /div  div 零食 /div  div 饮料 /div  p 猕猴桃 梨 /p  p 白菜 地瓜 /p  p 辣条 薯片 /p  p 可乐 果汁 /p 

css渲染

 div{ 100px; height: 40px; font-size: 30px; line-height: 40px; text-align: center; border:1px solid #000000; float: left; margin-left: 50px; user-select: none; clear: both; display: none;