Javascript 如何在img上单击，仅显示一个，并隐藏其他div

我在做这个项目，被JS卡住了。 在阅读课文之前，请先看图片。

我想做一个滑块（我做了），现在当我点击一个圆圈时，我只想用相同的颜色显示内容框，其他的应该隐藏

e、 g.当我单击.imgRed时，我只希望显示红色，其他颜色、蓝色和黑色

显示：无

谢谢。
你可能知道你应该做什么，但你没有信心。你应该隐藏其他人，但你想留下的人除外。

例如，对于红色，您应该执行以下操作：

$('.imgRed').click(function() {
    $('#red').show();
    $('#black').hide();
    $('#blue').hide();
}

对所有其他人重复

$('.imgRed').click(function(){
    $('#red').show();
    $('#blue,#black').hide();
});

现在，当您单击class.imgRed的所有元素时，只有ID为红色的元素才可见

和你的其他课程一样
 我尝试根据图像创建一个工作片段，我使用了：


一个圆圈类，另一个酒吧类
圆圈具有一个
数据颜色
属性，该属性将针对单击时显示的条形图

这是：


//单击圆时，使用数据colo显示正确的条形图
$（'.circle'）。单击（函数（）{
$（'.bar'）.hide（）；
var color=$（this.data（'color'）；
$（'#'+颜色）.show（）；
});
//加载时触发单击事件：
$（'.imgRed'）。触发器（'click'）
.circle{
显示：内联块；
利润率：8px 16px；
边界：30px固体；
边界半径：50%；
身高：0；
宽度：0；
}
.酒吧{
显示：无；
利润率：8px 16px；
高度：40px；
宽度：250px；
}
伊姆格雷德先生{
边框颜色：红色；
背景色：红色；
}
伊姆布雷克先生{
边框颜色：黑色；
背景色：黑色；
}
.imgBlue{
边框颜色：蓝色；
背景颜色：蓝色；
}




你能添加你的html/js让我们看看你的想法吗？如果有的话，甚至可以添加一些CSS。这太棒了。谢谢您，您是否还知道如何在加载时仅显示第一个，例如红色？@Adnan当然，您可以使用
display:none
在
.bar
s的CSS中，并在加载时触发
redImg
的
click
事件，如下所示：
$（'.imgRed'）.trigger（'click'）…我已经这样更新了代码片段。谢谢你，你真的帮了我。