spa
<!-- location
navigator
history
screen
window -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
}
.one {
background-color: pink;
display: none;
}
.two {
background-color: yellow;
display: none;
}
.show {
display: block;
}
</style>
</head>
<body οnhashchange="myFunction()">
<button data-id="1">1</button>
<button data-id="2">2</button>
<div class="box one" data-id="1">11111111111111111</div>
<div class="box two" data-id="2">22222222222222222</div>
<script>
// todo存在localStorage里面
// {
// "id" : 1,
// "task" : "hw",
// "done" : false
// }
// 四个界面
// 创建todo
// 显示某个todo
// 修改todo
// 显示todo列表（所有todo）
// 1.按钮按下去显示内容隐藏其他的
// 2.改变网址
// 3.改变网址也要改变内容
buttons = document.querySelectorAll('button')
boxs = document.querySelectorAll('.box')
buttons.forEach(button => {
button.addEventListener("click", function (e) {
const id = e.target.dataset.id
let nowId = location.search.split('=')
nowId = nowId[nowId.length - 1]
if (id === nowId) {
return
}
path = "?path=" + id
history.pushState(null, '', path)
showpage()
})
})
function showpage() {
let path = location.search
if (path === "") {
for (let i = 0; i < boxs.length; i++) {
if (boxs[i].classList.contains("show")) {
boxs[i].classList.remove("show")
break;
}
}
return
}
else {
let id = path.split('=')
id = id[id.length - 1]
for (let i = 0; i < boxs.length; i++) {
if (boxs[i].classList.contains("show")) {
boxs[i].classList.remove("show")
break;
}
}
for (let i = 0; i < boxs.length; i++) {
if (boxs[i].dataset.id === id) {
boxs[i].classList.add("show")
break;
}
}
}
}
window.addEventListener("popstate", function () {
showpage()
});
showpage()
</script>
</body>
</html>