html5中“页面切换”实为dom切换，核心是js控制显隐、内容替换或url状态更新；需用history.pushstate+popstate实现无刷新路由，配合服务端fallback、本地存储状态及css动画优化。
HTML5 里没有“页面切换”这回事，只有 DOM 切换
浏览器标签页里所谓“同一界面切换”，本质是用 JS 控制元素显隐、替换内容或更新 URL 状态，不是跳转新页面。直接写 window.location.href 或 <a href="xxx"></a> 就脱离了“同一界面”前提。
常见错误现象：404（刷新后路由失效）、history.pushState 后返回空白、CSS 动画卡顿、SEO 内容不被爬虫抓取。
- 用
display: none切换多个<section></section>最简单，但 DOM 一直存在，内存占用高 - 用
innerHTML或replaceChildren()替换内容更轻量，但事件监听器需重绑 - 若要支持浏览器前进/后退，必须配合
history.pushState()+popstate事件
用 history.pushState + popstate 实现无刷新路由
这是单页应用（SPA）最基础的路由机制，不依赖框架也能跑。关键不是“怎么跳”，而是“跳了之后怎么响应”。pushState 不触发页面加载，只改地址栏和历史栈；真正干活的是监听 popstate 后手动更新视图。
容易踩的坑：pushState 的第三个参数（URL）必须是同源路径，不能是绝对外链；popstate 在页面首次加载时不会触发，需手动初始化一次视图。
立即学习“前端免费学习笔记（深入）”；
自动隐藏的QQ在线客服代码是一款基于jQuery实现的默认展开可自动隐藏的QQ在线客服代码，界面非常简洁，此款JS代码特效可按客服功能放置不同的客服QQ号码，鼠标移上去即展开客服信息，移走自动隐藏，如果需要修改其中客服信息，修改service.js文件即可。
-
history.pushState({page: 'detail'}, '', '/detail')—— 第二个参数是 title（基本被忽略），别填空字符串以外的值 - 监听用
window.addEventListener('popstate', e => { render(e.state.page) })，e.state是你传进去的状态对象 - 服务端必须配置：所有前端路由都 fallback 到
index.html，否则刷新就 404
localStorage 或 sessionStorage 保存切换状态
用户切到“设置”页再关掉浏览器，重新打开还想停在“设置”页？靠 URL 路径还不够，得存状态。这时候不用上复杂状态管理，原生存储就够用。
注意兼容性：localStorage 永久存在，sessionStorage 关闭标签页即清空；两者都受同源策略限制，且存的是字符串 —— 对象得先 JSON.stringify()。
- 切换时存：
localStorage.setItem('lastView', 'profile') - 初始化时读：
const last = localStorage.getItem('lastView') || 'home'，再渲染对应模块 - 不要存大量数据，单条上限约 5MB，但实际建议控制在几十 KB 内，避免阻塞主线程
CSS 过渡动画要绑定到具体元素，不是靠 JS 控制类名就完事
加个 fade-in 类看起来动了，但若元素是 display: none 状态，动画根本不会触发 —— 因为它已脱离渲染流。过渡生效的前提是元素在文档流中且属性可动画（如 opacity、transform）。
典型错误：.view { transition: all 0.3s } 配合 display: none/block，结果没动画。
- 正确做法：用
opacity: 0+visibility: hidden控制显隐，再配transition: opacity 0.2s, visibility 0.2s - 若用
transform: translateX(100%)做侧滑，记得给容器加overflow: hidden，否则滚动条会闪一下 - 动画期间避免操作
offsetHeight等触发强制同步布局，否则卡顿
真正难的不是切，是切完怎么让状态可回溯、内容可恢复、动画不破相、刷新不丢上下文。这些细节堆起来，才叫“同一界面”。
