JavaScript 中使用 display 属性实现 div 切换的完整教程-html教程-PHP中文网

JavaScript 中使用 display 属性实现 div 切换的完整教程

本文详解如何通过原生 JavaScript 正确控制多个 div 的显隐切换，解决因 CSS 选择器范围过宽导致所有 div 默认隐藏、setProperty 无效等常见问题，并提供可直接运行的优化代码。

本文详解如何通过原生 javascript 正确控制多个 div 的显隐切换，解决因 css 选择器范围过宽导致所有 div 默认隐藏、`setproperty` 无效等常见问题，并提供可直接运行的优化代码。

在 JavaScript 初学者实践中，常遇到“点击按钮无反应”或“div 始终不显示”的问题——表面看逻辑正确，实则根源往往藏于 CSS 作用域或 DOM 操作细节中。你当前的代码中，div { display: none } 这条全局样式会匹配页面中所有 div 元素（包括

），导致整个容器被隐藏，其内部子 div 即便 JS 设置了 display: block 也无法显现（父元素 display: none 会强制隐藏所有后代）。

✅ 正确做法是：精准限定 CSS 作用范围，仅对目标子 div 应用初始隐藏样式。推荐使用 #main div 选择器替代泛化的 div，并配合 :first-child 确保初始化时至少一个 div 可见：

#main div {
  background: red;
  padding: 10px;
  color: white;
  margin: 10px;
  display: none; /* 仅作用于 #main 内的 div */
}
#main div:first-child {
  display: block; /* 初始化显示第一个 div */
}
html {
  background: grey;
}

同时，JS 逻辑需精简并修正变量作用域问题（原代码中重复声明 let current = n 会导致语法错误）。style.setProperty() 并非不可用，但针对 display 这类基础属性，直接赋值 element.style.display = 'block' 更直观、兼容性更好，且避免因 CSS 自定义属性（CSS Custom Properties）误用引发的静默失败：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

function show(n) {
  // 先隐藏所有目标 div
  for (let i = 1; i <p>⚠️ 关键注意事项：</p>

ID 命名规范：HTML 中以数字开头的 ID（如 id="1"）虽在现代浏览器中可工作，但不符合 HTML5 规范（ID 应以字母开头）。建议改用 id="div1"、id="div2" 等，提升可维护性与兼容性；
DOM 存在性检查：添加 if (el) 判断，防止因 ID 不存在导致脚本中断；
事件绑定优化：避免内联 onclick，推荐使用 addEventListener 实现关注点分离（进阶实践）；
性能考量：若 div 数量较多，可缓存 document.getElementById() 结果或使用 document.querySelectorAll('#main > div') 批量操作。

最终，将 init() 调用从

移至文档末尾或 DOMContentLoaded 事件中，确保 DOM 加载完成后再执行脚本，避免因元素未就绪导致获取失败。此方案兼顾简洁性、健壮性与教学清晰度，是初学者掌握 DOM 显隐控制的理想起点。