©2020-2024 ioDraw All rights reserved
<> I want you to type it again
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>
.pages>div{display: none;} </style> </head> <body> <p> <a href="#/">aaa</a> <a
href="#/about">bbb</a> <a href="#/user">cccc</a> </p> <div class="pages"> <div
id="home"> home page </div> <div id="about"> About my page </div> <div class="user"> User center </div>
</div> </body> <script type="text/javascript"> //hash And page by page //router to configure var
router = [ {path:"/",component:document.getElementById("home")},
{path:"/about",component:document.getElementById("about")},
{path:"/user",component:document.querySelector(".user")}, ] // default hash
window.location.hash = "#/"; // Default page var currentView = router[0].component;
currentView.style.display="block"; window.onhashchange=()=>{ // By judgment hash switch div page
console.log(location.hash); // obtain hash value , No tag var hash = location.hash.slice(1);
router.forEach(item=>{ if(item.path==hash){ // Hide previously displayed page first
currentView.style.display = "none"; // Display the corresponding component item.component.style.display =
"block"; // Reset which page is currently displayed div currentView = item.component; } }) } </script>
</html>
Technology