按钮点击后显示“已点赞”需用JavaScript：初始设data-liked="false"，点击时用textContent改文字、classList.toggle()加样式、dataset.liked="true"存状态，持久化用localStorage，服务端确认后更新，兼顾aria-pressed和加载态。
怎么让按钮点击后显示“已点赞”状态
纯 HTML 无法保存状态，必须配合 JavaScript。否则每次刷新都回到初始文案，用户会以为没点上。
- 用
button元素，别用div或a冒充按钮——语义错误、键盘不可聚焦、屏幕阅读器不识别 - 初始文案设为“点赞”，点击后改为“已点赞”，同时可加
disabled属性防重复点击 - 别只改文字：加一个
data-liked="false"属性，方便后续读取或发请求 - 示例：
<button type="button" data-liked="false">点赞</button>
为什么 onclick="this.innerHTML='已点赞'" 是错的起点
这种内联写法看着快，但一出问题就难调试，且无法复用逻辑（比如要同步更新计数、发 API、存 localStorage）。
- 内联 JS 无法被浏览器缓存，也不利于单元测试
- 直接操作
innerHTML有 XSS 风险（如果文案来自后端未过滤数据） - 应该用
textContent改文字，用classList.toggle()控制样式（比如加个liked类） - 正确绑定方式：
document.querySelector('button').addEventListener('click', handleLike);
点击后如何保持状态不丢失（刷新也不变）
HTML 是静态的，状态必须落地到某处：内存、DOM 属性、localStorage 或服务端。
- 临时状态（单页内）：用
dataset.liked = 'true'同步更新属性 - 持久化需求（关页再进也要记住）：写入
localStorage，但注意键名别硬编码成'post_123'这种，得从按钮本身读，比如button.dataset.postId - 服务端状态才是真实状态：前端改文案只是“乐观更新”，最终要靠 API 响应确认；失败时得回滚 UI
- 别忘了 loading 状态：点击后立刻置灰+文字变“提交中”，避免用户狂点
button 样式和可访问性容易漏掉什么
很多人只顾加 hover 和 active 效果，却让键盘用户卡在 tab 键上跳不过去。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
tabindex="0"（如果用了div）或确保是原生button（它默认可聚焦） - 用
:focus-visible而不是:focus控制焦点样式，避免鼠标点击时也出现难看的轮廓线 - 添加
aria-label或aria-pressed：比如aria-pressed="false"，供读屏软件识别开关状态 - 图标按钮务必配文字（哪怕
visually-hidden），否则aria-label不生效或被忽略
