如何修改JavaScript代码实现点击图片切换对应内容显示

嘿，这问题很好解决！我们只需要给点击元素添加统一的标识，再用一套通用的事件逻辑来控制对应内容的显示隐藏，就能避免重复代码，实现你要的切换效果。下面是具体的修改步骤：

1. 调整HTML结构，添加标识 #

首先给两个点击触发的图片加上统一的类名（比如tab-trigger），再用自定义属性data-target标记它们对应的内容容器ID；同时给要切换的内容容器加上对应ID和统一的类名（比如content-group）：

<!-- Franchise Hub 图片 -->
<img 
  src="你的Franchise Hub图片地址" 
  class="tab-trigger" 
  data-target="desktop-content" 
  alt="Franchise Hub"
>

<!-- Cloud Based & Mobile 图片 -->
<img 
  src="你的Cloud Based & Mobile图片地址" 
  class="tab-trigger" 
  data-target="mobile-content" 
  alt="Cloud Based & Mobile"
>

<!-- 桌面屏幕及右侧文本容器 -->
<div id="desktop-content" class="content-group active">
  <!-- 这里放你的桌面屏幕和对应文本内容 -->
</div>

<!-- 手机屏幕及对应内容容器 -->
<div id="mobile-content" class="content-group">
  <!-- 这里放你的手机屏幕和对应文本内容 -->
</div>

注：给默认要显示的内容容器加上active类，确保页面加载时默认显示正确的内容

2. 添加基础CSS控制显示隐藏 #

用CSS来控制内容的显示状态，默认隐藏所有content-group，只有带active类的才显示：

.content-group {
  display: none; /* 默认隐藏所有内容组 */
}

.content-group.active {
  display: block; /* 根据你的布局需求，也可以用flex等其他属性 */
}

3. 修改JavaScript逻辑，实现通用切换 #

现在用一套通用的JS代码处理所有点击事件，不用单独写每个图片的逻辑：

// 获取所有触发点击的图片和内容容器
const triggers = document.querySelectorAll('.tab-trigger');
const contentGroups = document.querySelectorAll('.content-group');

// 给每个触发图片绑定点击事件
triggers.forEach(trigger => {
  trigger.addEventListener('click', () => {
    // 获取当前点击图片对应的目标内容ID
    const targetContentId = trigger.dataset.target;
    
    // 先隐藏所有内容组
    contentGroups.forEach(group => {
      group.classList.remove('active');
    });
    
    // 显示当前点击对应的内容组
    document.getElementById(targetContentId).classList.add('active');
  });
});

为什么这样改？ #

这种方式的好处是可扩展性极强——以后如果要加更多切换项，只需要给新的图片加tab-trigger类和对应的data-target，再给新的内容容器加对应ID和content-group类就行，完全不用修改JS代码。而且逻辑清晰，避免了重复的事件绑定代码。

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