lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        第一个页面
    </div>
    <button data-index="0">按钮1</button>
    <button data-index="1">按钮2</button>
    <button data-index="2">按钮3</button>
    <script>
        let btns = document.querySelectorAll('button');
        let oBox = document.querySelector('.box');
        let textArr = ["第一个页面", "第二个页面", "第三个页面"];
        
        btns.forEach(function(item){
            item.onclick = function(){
                let index = this.dataset.index;
                oBox.innerHTML = textArr[index];
                window.history.pushState(index,"");
            }
        });

        window.onpopstate = function(){
            let index = window.history.state*1;
            console.log(index);
            oBox.innerHTML = textArr[index];
        }

    </script>
</body>
</html>