横向导航本身不提供路由能力，真正实现单页切换的是JavaScript对location.hash或history.pushState的控制加手动DOM更新；需拦截点击、监听hashchange或popstate、提取路径并渲染视图，且首次加载须手动触发初始化。
横向导航本身不提供路由能力，它只是视觉布局；真正实现单页切换的，是 JavaScript 对 location.hash 或 history.pushState 的控制 + 手动 DOM 更新。别指望 float 或 flex 排列完导航就自动切换内容——那只是“看起来像菜单”，没绑定逻辑就等于没路由。
用 location.hash 实现最稳的横向导航路由
在线运行器（CodePen/JSBin）、本地双击打开 HTML、或需兼容 IE8+ 的场景，hash 是唯一能跑通的方案。关键不是怎么排导航，而是怎么让点击触发 hash 变化并响应它。
- 给每个导航
<a></a>加href="#/xxx"，不要写href="/xxx"（后者会刷新） - 用
document.addEventListener('click', e => { if (e.target.matches('[href^="#/"]')) { e.preventDefault(); location.hash = e.target.getAttribute('href'); } })统一拦截 - 必须监听
hashchange：window.addEventListener('hashchange', router)，且首次加载要手动触发一次router()（否则默认视图不显示） - 匹配路径时别直接比
location.hash === '#/user'，先切掉#：const path = location.hash.slice(1) || '/'，再用switch(path)或对象查找
history.pushState 在横向导航中怎么用才不出错
如果你的页面部署在 HTTP/HTTPS 服务上（比如 Nginx、Vercel、或本地用 live-server 启动），可以用 pushState 实现无 # 的干净 URL，但必须同步处理服务端 fallback 和 popstate 监听。
- 导航点击时调
history.pushState({}, '', '/user')，不是location.href = '/user'（后者整页刷新） - 必须监听
popstate：window.addEventListener('popstate', e => renderView(location.pathname))，否则浏览器后退按钮无效 - 服务端必须配置：所有未命中静态文件的请求都返回
index.html，否则直接访问/user会 404 - 避免混用：如果用了
pushState，就别再操作location.hash，否则历史栈和当前 URL 状态会错乱
横向导航点击后，DOM 内容怎么安全切换
别反复用 innerHTML 替换整个区域——事件监听器丢失、定时器未清理、输入框焦点丢失都是常见后果。尤其当导航栏是 float 布局时，父容器容易塌陷，更得小心更新逻辑。
立即学习“前端免费学习笔记（深入）”；
- 用固定容器承载内容，比如
<main id="app"></main>，只替换其子节点或 class - 若需保留交互逻辑，优先用 class 控制显隐：
document.getElementById('home-view').classList.add('active')，其他视图remove('active') - 如果必须动态插入 HTML，渲染后立刻重绑事件，或统一用事件委托：
document.getElementById('app').addEventListener('click', e => { if (e.target.matches('[data-action]')) {...} }) - 注意
location.hash = ''会滚动到页面顶部，改用location.hash = '#'避免意外跳转
横向导航的样式（flex / float / grid）和路由逻辑是两层事，前者决定“菜单长什么样”，后者决定“点完之后干啥”。最容易被忽略的是首次加载补事件、hash 路径提取、以及服务端 fallback 这三点——漏一个，整个路由就卡在默认页不动了。
