如何通过DIV ID而非P标签，用DOM JS实现点击按钮切换同class DIV显示？

当然可行啦！用ID来获取DOM元素是非常常见且高效的做法，甚至比通过p标签获取更精准——毕竟ID在页面里是唯一的，不会出现误匹配的情况。针对你说的两个同class的DIV切换显示的需求，我给你整理了完整的实现方案：

第一步：调整HTML结构，给DIV添加唯一ID #

咱们先给两个同class的DIV分别加上唯一ID，这样JS就能精准定位到它们：

<button type="button" onclick="changeContent(1)">Example 1</button>
<button type="button" onclick="changeContent(2)">Example 2</button>
<p id="demoX"></p>
<!-- 给两个DIV添加唯一ID，保留原class不影响样式 -->
<div id="example1" class="ex1">这是示例1的具体内容</div>
<div id="example2" class="ex1" style="display: none;">这是示例2的具体内容</div>

第二步：编写JS切换逻辑 #

接下来写changeContent函数，通过ID获取元素后控制显示隐藏：

function changeContent(num) {
  // 通过ID获取两个DIV元素
  const example1 = document.getElementById('example1');
  const example2 = document.getElementById('example2');
  
  // 先统一隐藏两个DIV
  example1.style.display = 'none';
  example2.style.display = 'none';
  
  // 根据按钮参数显示对应DIV
  if (num === 1) {
    example1.style.display = 'block'; // 可根据需求换成inline-block、flex等
  } else if (num === 2) {
    example2.style.display = 'block';
  }
  
  // 可选：同步更新p标签的内容
  document.getElementById('demoX').textContent = `当前展示的是示例${num}`;
}

进阶优化：用CSS类控制显示隐藏（推荐） #

如果想让样式和逻辑分离，也可以定义一个CSS隐藏类，通过添加/移除类来控制：

/* 定义隐藏类 */
.hidden {
  display: none;
}

修改后的JS代码：

function changeContent(num) {
  const example1 = document.getElementById('example1');
  const example2 = document.getElementById('example2');
  
  // 先移除两个DIV的隐藏类
  example1.classList.remove('hidden');
  example2.classList.remove('hidden');
  
  // 给非目标DIV添加隐藏类
  if (num === 1) {
    example2.classList.add('hidden');
  } else if (num === 2) {
    example1.classList.add('hidden');
  }
}

这种方式更符合前端开发的最佳实践，后续调整样式只需要修改CSS即可，不用动JS逻辑~

内容的提问来源于stack exchange，提问作者Ennam Hoque