嘿，这就帮你搞定点击图片切换对应内容的需求！核心逻辑很清晰：点击某张图片时，显示对应的内容块，同时隐藏其他所有同类内容块。下面是完整的可落地实现方案：

第一步：完善HTML结构 #

首先咱们得补上内容容器，并且给图片加个data-target属性来关联对应的内容块——这种方式比从ID里拆分数字更直观、扩展性更强：

<!-- 图片容器 -->
<div id="imagesContainer">
  <img id="image0" src="你的图片地址0" data-target="content0" alt="图片0">
  <img id="image1" src="你的图片地址1" data-target="content1" alt="图片1">
  <img id="image2" src="你的图片地址2" data-target="content2" alt="图片2">
  <img id="image3" src="你的图片地址3" data-target="content3" alt="图片3">
</div>

<!-- 内容容器：所有内容默认重叠，初始可只显示第一个或全部隐藏 -->
<div id="contentsContainer">
  <div id="content0" class="content-block">内容0</div>
  <div id="content1" class="content-block" style="display: none;">内容1</div>
  <div id="content2" class="content-block" style="display: none;">内容2</div>
  <div id="content3" class="content-block" style="display: none;">内容3</div>
</div>

第二步：添加基础CSS实现内容重叠 #

给内容块设置绝对定位，确保它们能重叠在同一个区域：

#contentsContainer {
  position: relative;
  /* 根据你的需求自定义宽高 */
  width: 500px;
  height: 300px;
}

.content-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 可选：加背景色方便测试效果 */
  background-color: #fff;
}

第三步：编写JavaScript切换逻辑 #

咱们写一个通用的处理函数，用addEventListener绑定事件（比内联onclick更符合现代JavaScript实践）：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有图片元素
  const images = document.querySelectorAll('#imagesContainer img');
  // 获取所有内容块元素
  const contentBlocks = document.querySelectorAll('.content-block');

  // 给每张图片绑定点击事件
  images.forEach(image => {
    image.addEventListener('click', function() {
      // 第一步：隐藏所有内容块
      contentBlocks.forEach(block => {
        block.style.display = 'none';
      });
      // 第二步：获取当前图片对应的目标内容块ID
      const targetId = this.getAttribute('data-target');
      // 第三步：显示对应的内容块
      document.getElementById(targetId).style.display = 'block';
    });
  });
});

可选优化：事件委托（应对动态新增图片） #

如果后续需要动态添加图片，推荐用事件委托给父容器绑定事件，不用给每张图片单独绑定：

// 事件委托版本，支持动态新增的图片
document.getElementById('imagesContainer').addEventListener('click', function(e) {
  // 确认点击的是图片元素
  if (e.target.tagName === 'IMG') {
    // 隐藏所有内容块
    contentBlocks.forEach(block => block.style.display = 'none');
    // 显示对应内容块
    const targetId = e.target.getAttribute('data-target');
    document.getElementById(targetId).style.display = 'block';
  }
});

这样不管点击哪张图片，对应的内容都会立刻显示，其他内容自动隐藏，完美实现你的需求！

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