|
|
@@ -0,0 +1,72 @@
|
|
|
+<!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>
|
