点击对应颜色圆形图片时，仅显示同色content-box并隐藏其他

嘿，我完全明白你的需求啦！要实现点击颜色圆形图片后只显示对应内容框、隐藏其他内容的功能其实很简单，我给你整理了两种实用的实现方案，你可以根据自己的代码结构来选：

方案一：基于类名对应关系实现 #

如果你的颜色按钮类名（比如.imgRed）和内容框ID（比如#red）是有规律对应的，用这个方案最省事：

// 获取所有颜色按钮和内容框元素
const colorButtons = document.querySelectorAll('.imgRed, .imgBlue, .imgBlack');
const contentBoxes = document.querySelectorAll('#red, #blue, #black');

// 给每个颜色按钮绑定点击事件
colorButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 第一步：先隐藏所有内容框
    contentBoxes.forEach(box => {
      box.style.display = 'none';
    });
    
    // 第二步：提取对应内容框的ID，显示目标内容
    const targetId = button.classList[0].replace('img', '').toLowerCase();
    document.getElementById(targetId).style.display = 'block'; // 如果你的内容框是flex布局，就改成'flex'
  });
});

代码逻辑说明： #

• 先一次性获取所有需要操作的按钮和内容框，不用逐个绑定事件
• 点击按钮时先统一隐藏所有内容框，避免多个内容框同时显示
• 通过按钮的类名（比如.imgRed）提取出对应的内容框ID（red），精准显示目标内容

方案二：基于自定义属性实现（更灵活） #

如果你的按钮类名和内容框ID没有规律，或者以后可能修改命名，推荐用自定义属性的方式，扩展性更强：

首先修改你的HTML按钮部分，给每个按钮加一个data-target属性，指定对应的内容框选择器：

<img src="红色圆形图片路径" class="color-btn" data-target="#red" alt="红色">
<img src="蓝色圆形图片路径" class="color-btn" data-target="#blue" alt="蓝色">
<img src="黑色圆形图片路径" class="color-btn" data-target="#black" alt="黑色">

然后编写JS代码：

const colorButtons = document.querySelectorAll('.color-btn');
const contentBoxes = document.querySelectorAll('#red, #blue, #black');

// 绑定点击事件
colorButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 隐藏所有内容框
    contentBoxes.forEach(box => box.style.display = 'none');
    // 显示目标内容框
    const targetBox = document.querySelector(button.dataset.target);
    if (targetBox) {
      targetBox.style.display = 'block'; // 按需改成flex/grid等布局属性
    }
  });
});

额外优化：默认显示指定内容框 #

如果希望页面加载完成后默认显示某一个内容框（比如红色），可以加上这段初始化代码：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', () => {
  contentBoxes.forEach(box => box.style.display = 'none');
  document.getElementById('red').style.display = 'block';
});

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