html无原生“隐藏元素”，隐藏靠css/js控制；推荐用hidden属性语义化隐藏、classlist.toggle()切换预设类、data-active统一管理多块内容、opacity+visibility优化滚动性能。

HTML 模板里没有“隐藏元素”这个原生概念，所谓“隐藏”，只是通过 CSS 或 JS 控制元素是否渲染或可见。页面内容快速切换的核心，不是靠模板语法藏东西，而是用 display、hidden 属性、类名切换或 DOM 重用实现状态管理。

用 hidden 属性做语义化隐藏

HTML5 原生支持 hidden 布尔属性，浏览器会自动应用 display: none 效果，且具有可访问性语义（屏幕阅读器会跳过）：

• hidden 是布尔属性，写成 <div hidden> 即生效，不用赋值；移除该属性即恢复显示 <li>它比 <code>style="display:none" 更语义清晰，也比自定义 class 更轻量
• 注意：CSS 中可用 [hidden] { display: none !important; } 强制覆盖，但一般不需要
• 不推荐在需要动画的场景下直接用 hidden，因为它不可过渡（display 不支持 transition）

用 classList.toggle() 切换预设 CSS 类

这是最常用、最可控的快速切换方式，尤其适合按钮触发的单块内容显隐：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• CSS 定义一个 .hidden 类：.hidden { display: none; }
• JS 只需一行：el.classList.toggle('hidden')，自动判断增删
• 避免手动读取 style.display 值——因为内联样式可能为空、为 block、为 flex，判断逻辑易错
• 若需过渡效果（如淡入），改用 opacity + visibility 组合，并监听 transitionend 再设 display: none

多个内容块共存时，别用 display: none 手动轮询

当页面有 5 个面板、每次只显示一个，常见错误是写一堆 if/else 判断并逐个设 style.display。这会导致：

• 状态耦合严重：新增一个面板就得改所有分支逻辑
• 遗漏隐藏：某次更新漏掉某个 el.style.display = 'none'，导致两个面板同时显示
• 维护困难：无法一眼看出当前激活的是谁
• 正确做法是统一管理“激活态”——比如给当前显示的元素加 data-active="true"，再用 CSS [data-active="true"] { display: block; } 控制，JS 只负责更新这个属性

滚动或视口触发时，display 不是唯一选择

滚动中频繁切换显隐，如果每次都操作 display，可能触发重排（reflow），影响性能：

• 优先考虑 opacity: 0 + pointer-events: none，配合 transition 实现平滑进出
• 若必须彻底脱离文档流（比如节省渲染资源），再用 display: none，但务必搭配 requestAnimationFrame 节流，避免滚动中高频触发
• 注意：visibility: hidden 保留布局空间，适合固定尺寸容器内的占位切换

真正容易被忽略的点是：隐藏 ≠ 移除。很多场景下，“隐藏”只是为了暂时不可见，而非销毁数据或释放资源。所以别在 toggle 逻辑里反复 innerHTML = '' 或 remove()，除非你明确需要清空状态。