如何选中ID不为this.id的元素？实现点击仅显示对应block div功能

我来帮你搞定这个需求！核心思路很简单：点击某个p元素时，先把所有的block div都隐藏，再单独显示当前p对应的那个div；或者直接定位到所有非当前ID对应的div，把它们隐藏，同时显示目标div。下面给你两种可行的实现方案：

方案一：基于ID前缀匹配（适配你现有HTML结构） #

直接复用你给出的HTML结构，只需要补充JavaScript逻辑就行：

<!--用于切换block div显示的元素-->
<p onclick="expand(this.id)" id="p1">点击显示区块1</p>
<p onclick="expand(this.id)" id="p2">点击显示区块2</p>
<p onclick="expand(this.id)" id="p3">点击显示区块3</p>
<p onclick="expand(this.id)" id="p4">点击显示区块4</p>

<!--block div-->
<div id="block_p1" style="display: none;">这是区块1的内容</div>
<div id="block_p2" style="display: none;">这是区块2的内容</div>
<div id="block_p3" style="display: none;">这是区块3的内容</div>
<div id="block_p4" style="display: none;">这是区块4的内容</div>

<script>
function expand(currentPId) {
  // 1. 选中所有ID以"block_p"开头的div元素
  const allBlockDivs = document.querySelectorAll('[id^="block_p"]');
  
  // 2. 遍历所有区块，隐藏非当前对应的div，显示当前对应的div
  allBlockDivs.forEach(div => {
    if (div.id !== `block_${currentPId}`) {
      div.style.display = 'none';
    } else {
      div.style.display = 'block';
    }
  });
}
</script>

代码说明： #

• 给所有block div默认加上display: none，初始状态全部隐藏；给p元素加了文本方便测试。
• 使用document.querySelectorAll('[id^="block_p"]')可以一次性选中所有符合ID前缀的div，不用逐个写ID，后续新增区块也不用修改JS逻辑。
• 遍历过程中通过block_${currentPId}拼接出当前p对应的div ID，判断后控制显示/隐藏。

方案二：用类名+自定义属性（扩展性更强） #

如果后续需要新增更多p和div，这种写法会更灵活，不用改动JS代码：

<p onclick="expand(this.dataset.target)" class="toggle-btn" data-target="block1">点击显示区块1</p>
<p onclick="expand(this.dataset.target)" class="toggle-btn" data-target="block2">点击显示区块2</p>
<p onclick="expand(this.dataset.target)" class="toggle-btn" data-target="block3">点击显示区块3</p>
<p onclick="expand(this.dataset.target)" class="toggle-btn" data-target="block4">点击显示区块4</p>

<div class="content-block" id="block1">这是区块1的内容</div>
<div class="content-block" id="block2">这是区块2的内容</div>
<div class="content-block" id="block3">这是区块3的内容</div>
<div class="content-block" id="block4">这是区块4的内容</div>

<style>
.content-block {
  display: none;
}
</style>

<script>
function expand(targetId) {
  // 选中所有带.content-block类的区块
  const allBlocks = document.querySelectorAll('.content-block');
  
  allBlocks.forEach(block => {
    if (block.id !== targetId) {
      block.style.display = 'none';
    } else {
      block.style.display = 'block';
    }
  });
}
</script>

代码说明： #

• 用data-target属性给p元素绑定对应的div ID，语义更清晰。
• 用类名.content-block统一管理所有区块，选中逻辑更简洁，新增区块时只需要复制p和div，修改ID和文本即可，JS代码完全不用动。

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