lovecoding
/
Web1020


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!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 id="box">
        第一个页面
    </div>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <button id="btn4">按钮4</button>
    <script>
        // console.log(window.location);
        let oBtn1 = document.getElementById('btn1');
        let oBtn2 = document.getElementById('btn2');
        let oBtn3 = document.getElementById('btn3');
        let oBtn4 = document.getElementById('btn4');
        let oBox = document.getElementById('box');
        let aBtn = document.querySelectorAll('button');

        let obj = {
            page1: '第一个页面',
            page2: '第二个页面',
            page3: '第三个页面',
            page4: '第四个页面'
        }

        for(let i = 0;i<aBtn.length;i++){
            aBtn[i].onclick = function(){
                let str = obj['page'+(i+1)]
                console.log(str);
                oBox.innerHTML = str;
                location.hash = "page"+(i+1)
            }
        }


        // oBtn1.onclick = function(){
        //     oBox.innerHTML = '第一个页面';
        //     location.hash = "page1"
        // }
        // oBtn2.onclick = function(){
        //     oBox.innerHTML = '第二个页面';
        //     location.hash = "page2"
        // }
        // oBtn3.onclick = function(){
        //     oBox.innerHTML = '第三个页面';
        //     location.hash = "page3"
        // }
        // oBtn4.onclick = function(){
        //     oBox.innerHTML = '第四个页面';
        //     location.hash = "page4"
        // }

        // 监听hash值的变化
        window.onhashchange = function(){
            let str = location.hash.slice(1);
            console.log(str);
            for(let key in obj){
                if(key == str){
                    oBox.innerHTML = obj[key];
                }
            }
        }

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