如何用 JavaScript 和 CSS 批量切换指定类元素的显示与隐藏-js教程-PHP中文网

本文介绍一种简洁可靠的前端方法：通过单击链接，批量控制所有带有特定 CSS 类（如 hideable）的 HTML 元素（如、）的可见性，无需框架，兼容现代浏览器，适合初学者快速上手。

本文介绍一种简洁可靠的前端方法：通过单击链接，批量控制所有带有特定 css 类（如 `hideable`）的 html 元素（如 `

`、`

`）的可见性，无需框架，兼容现代浏览器，适合初学者快速上手。

要实现“一键隐藏/显示所有指定段落”，核心思路是：为目标元素添加统一标识（推荐使用语义清晰的 CSS 类），再用 JavaScript 绑定点击事件，动态切换其显示状态。不建议自定义标签（如），因为非标准标签需额外声明、缺乏语义且可能影响可访问性与浏览器兼容性；而 CSS 类方案简洁、标准、易维护。

以下为完整实现步骤：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

✅ HTML 结构（语义清晰，便于扩展）

<p class="hideable">这段文字可被切换显示/隐藏</p>
<p class="hideable">同样支持多段落批量控制</p>
<p>这段没有 class="hideable"，不受影响</p>
<p class="hideable">第三段可切换内容</p>

<a class="hide-items" href="#">? 点击切换所有可隐藏段落</a>

✅ CSS 样式（利用 display: none 控制显隐）

.hidden {
  display: none;
}
/* 可选：为可切换元素加视觉提示（如边框） */
.hideable {
  border-left: 3px solid #4a90e2;
  padding-left: 8px;
  margin: 8px 0;
}

✅ JavaScript 逻辑（安全、简洁、无副作用）

// 获取触发切换的链接元素
const toggler = document.querySelector('.hide-items');

// 绑定点击事件（使用 addEventListener 更规范）
toggler.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止 <a> 标签默认跳转行为

  // 查找所有带 hideable 类的元素
  const targets = document.querySelectorAll('.hideable');

  // 对每个目标元素切换 .hidden 类
  targets.forEach(element => {
    element.classList.toggle('hidden');
  });
});</a>

⚠️ 注意事项

确保脚本在 DOM 加载完成后执行：将 <script> 放在 </script>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南