<>我希望大家敲一遍
<!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">首页</div> <div id="about">关于我的页面</div> <div class="user">用户中心</div>
</div> </body> <script type="text/javascript"> //hash 和页面一一对应起来 //router 配置 var
router = [ {path:"/",component:document.getElementById("home")},
{path:"/about",component:document.getElementById("about")},
{path:"/user",component:document.querySelector(".user")}, ] // 默认hash
window.location.hash = "#/"; // 默认页面 var currentView = router[0].component;
currentView.style.display="block"; window.onhashchange=()=>{ //通过判断hash切换div页面
console.log(location.hash); //获取hash值,不要井号 var hash = location.hash.slice(1);
router.forEach(item=>{ if(item.path==hash){ //先隐藏之前显示的页面
currentView.style.display = "none"; // 显示对应的组件 item.component.style.display =
"block"; //重新设置当前显示的页面是哪个div currentView = item.component; } }) } </script>
</html>

技术
©2020 ioDraw All rights reserved
思科收购硅光子企业Acacia失败:双方各执一词解决vuex页面刷新数据丢失问题(简单有效)pytorch学习-torch.nn.BCELoss()和torch.nn.BCEWithLogitsLoss()散列表查找失败平均查找长度后台管理系统的权限控制------前端权限管理华为鸿蒙系统HarmonyOS学习之二:鸿蒙HarmonyOS系统架构js中的原型链,6种继承方式及其案例Arduino学习笔记 超声波避障小车企业网络拓扑图Golang交叉编译中的那些坑