history.pushState(state,null,url);
window.onpopstate = function(event){
event.state
}
html5 history api
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="tab.css">
</head>
<body>
<div class="tab">
<nav>
<a href="javascript:void();"> AAA </a>
<a href="javascript:void();"> BBB </a>
<a href="javascript:void();"> CCC </a>
</nav>
<div>
<p> aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa </p>
</div>
<div>
<p> bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb bbb </p>
</div>
<div>
<p> ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc ccc </p>
</div>
</div>
<script type="text/javascript" src="tab.js">
</script>
</body>
</html>
jsconst tab = document.querySelector(".tab");
const adoms = tab.querySelectorAll("nav > a");
const divs = tab.querySelectorAll("div");
window.onpopstate = function(event){
const index = event.state;
render(index);
}
adoms.forEach((a,index) => {
a.index = index;
a.addEventListener("click", click_handle)
});
let currentDivDOM = null, currentADOM = null;
function click_handle(event) {
const index = event.target.index;
history.pushState(index,null,"/tab"+index);
render(index);
}
function render(index){
if(currentADOM)
currentADOM.className = "";
currentADOM = adoms[index];
currentADOM.className = "clicked";
if(currentDivDOM)
currentDivDOM.className = "";
currentDivDOM = divs[index];
currentDivDOM.className = "show";
}
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
