<>我希望大家敲一遍
<!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
玩转Jetson Nano(八)人脸识别(二)Windows 10 21H1确认:经典版Edge被遗弃、不会更新python gui界面实例-Python GUI编程完整示例JDBC连接MySQL数据库Timezone时区问题FAQAndroid 12现在有了设备搜索API 可用于第三方启动程序Adobe Illustrator发布原生支持Apple Silicon的测试版软件初识Mongdb之数据查询篇(三)统计JIRA系统当前的bug情况Thread.setDaemon设置守护线程vue+element-ui 实现价格的输入限制