關於js中pushstate popstate

pushState和onpopstate是用來作頁面的無刷新，但是可以產生history(歷史記錄)和改變url的

簡單介紹
1.pushState

history.pushState({state:1}, "title", "#");
//三個參數  第一個是歷史記錄(必須寫)  第二個是title(可以不寫，直接寫""),第三個是接下來的url后面加的東西
//第一個參數可以當poptate觸發后，通過history.state 獲取到

2.onpopstate

 window.onpopstate=popStateHandle; //onpopstate 這是個事件，當頁面返回和前進時觸發

上面的介紹看着很抽象，寫了個小demo，在demo中更好的理解。

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].onclick=clickHandler;  //遍歷每個div標簽，點擊時觸發事件
            }
            
        }


        function clickHandler(){
           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的第一個參數
            changeMenu(history.state.index)   //頁面返回時觸發改變內容的函數
        }

       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>
    <br>
    <br>
    <p>獼猴桃
        蘋果
        梨</p>
    <p>白菜
        土豆
        地瓜</p>
    <p>辣條
        牛肉干
        薯片</p>
    <p>可樂
        雪碧
        果汁</p>

css渲染

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

上面的代碼我只注釋了js代碼，html和css我沒說明，不過相信看到這篇文章的都不需要說明。