纯HTML锚点跳转只触发滚动，不执行幻灯片切换逻辑；需用JavaScript监听hashchange事件并手动控制DOM显示/隐藏，或用:target实现极简单页切换。
用 <a> 跳转到 id 锚点为什么幻灯片不切换？
因为纯 HTML 锚点跳转（如 <a href="#slide2">）只触发浏览器滚动，不会自动执行任何切换逻辑。幻灯片切换需要主动控制 DOM 显示/隐藏或 class 状态，锚点本身不带行为。
常见错误现象：URL 变了，页面滚到了对应位置，但其他幻灯片没隐藏，视觉上还是全堆在一起。
- 必须配合 JavaScript 监听
hashchange事件，或在点击时手动干预 - 不能只靠 CSS 的
:target做多张幻灯片的互斥显示（它无法“关掉”其他 target） - 如果用了
scroll-behavior: smooth，记得它只影响滚动，不影响状态切换
怎么让 <a href="#slideN"> 点击后真正切换幻灯片？
核心是拦截跳转行为（或响应 hash 变化），然后更新当前激活项。推荐用 hashchange + 手动 DOM 控制，兼容性好、逻辑清晰。
实操建议：
- 给每张幻灯片加唯一
id，例如<section id="slide1">、<section id="slide2"> - 所有幻灯片默认设为
display: none，仅当前激活的设display: block或加activeclass - 监听
window.addEventListener('hashchange', ...)，从location.hash提取 ID，再 show/hide 对应元素 - 首次加载也要处理：在脚本里手动调用一次切换逻辑，否则刷新页面后不显示任何幻灯片
示例片段：
function showSlide(id) {
document.querySelectorAll('.slide').forEach(el => el.style.display = 'none');
const target = document.getElementById(id.slice(1)); // 去掉 '#'
if (target) target.style.display = 'block';
}
window.addEventListener('hashchange', () => showSlide(location.hash));
showSlide(location.hash || '#slide1'); // 初始化
:target 能不能直接实现简单切换？
可以，但仅限「单张显示、无过渡、无额外逻辑」的极简场景，且有明显限制。
使用条件：
- 所有幻灯片需是兄弟元素（同级
<section>或<div>） - CSS 必须写成：
.slide { display: none; } :target { display: block; } - 无法高亮当前导航项（
<a>标签自己没法根据 hash 加 class） - 不支持 fade/slide 过渡动画（
:target不触发重排，CSS transition 失效）
如果你点 <a href="#slide3"> 后只想让它显示、别的都藏，且不需要 JS 交互，那 :target 是最轻量解法；但只要涉及按钮高亮、计数器、历史记录控制，就必须上 JS。
为什么用 history.pushState 替代 href="#id"？
因为 #id 锚点会强制滚动，而幻灯片常需固定视口（比如全屏 height: 100vh），滚动会导致布局抖动或遮挡导航栏。
改用 pushState 可完全避免滚动，同时保留 URL 可书签、可前进后退的特性：
- 把
<a href="#slide2" onclick="goTo('slide2'); return false;">换成纯 JS 绑定 -
goTo(id)内部调用history.pushState({id}, '', '/' + id)，再手动切换幻灯片 - 仍要监听
popstate处理浏览器前进/后退 - 注意：这样 URL 就不再是
#slide2，而是/slide2，需服务端或路由层支持（静态页可用404.htmlfallback）
这个方案更可控，但复杂度上升——多数小项目没必要，除非你已经在用前端路由或对滚动行为极度敏感。
真正容易被忽略的是初始化时机：location.hash 在脚本执行前就已存在，但 DOM 可能还没加载完。务必确保 showSlide() 在 DOMContentLoaded 后执行，或者把 script 放在 body 底部。
