jQuery/JS：在单击单个div时激活两个div，同时禁用所有其他div

我试图使其当我点击一个div图像时，相应的内容框会弹出（即div从

display:none；

变为

display:inline；

）

[“弹出”框=带有

内容的div

]

我正在使用简单的JS激活相关的div：

$('.diagram div').click(function(){
  $(this).siblings('.diagram div').removeClass('active');
  $(this).addClass('active');
});

当前html看起来是这样的：

<div class="diagram">
  <div class="gameboy"></div>
  <div class="switch"></div>
  <div class="face"></div>
</div>
<div class="diagram-content">
  <div class="gameboy-content">This is a content box for the gameboy</div>
  <div class="switch-content">This is a content box for the switch</div>
  <div class="face-content">This is a content box for the face</div>
</div>

这是游戏机的内容框
这是交换机的内容框
这是面的内容框

问题是，我是否应该将内容弹出窗口封装在

.diagram

类中？或者将其放在单独的

图表内容
类中

如何修改代码以将
.active
类添加/附加到应该弹出的活动框中？或者最好的方法是修改
中相关内容框的css
显示。单击（函数）
？
而不是使用类，您可以使用HTML5
数据
属性。如果您想使用CSS实现图像更改，可以对这些属性使用CSS选择器

<div class="diagram">
  <div data-type="gameboy"></div>
  <div data-type="switch"></div>
  <div data-type="face"></div>
</div>
<div class="diagram-content">
  <div data-type="gameboy-content">This is a content box for the gameboy</div>
  <div data-type="switch-content">This is a content box for the switch</div>
  <div data-type="face-content">This is a content box for the face</div>
</div>

请注意，使用普通CSS类可以实现同样的效果，但最好将数据与视图隔离。在本例中，将图表内容的样式与内容的含义区分开来。
我明白您的意思，但我现在决定采用类方法！我仍然不确定我在语法上犯了什么错误（插入
警报
会完全停止代码：S，很难测试）-您有可能解决这个问题吗？
$('.diagram div').click(function(){
  var $this = $(this);
  var type = $this.data('type');
  $this.siblings('.diagram div').removeClass('active');
  $this.addClass('active');
  $('div.diagram-content [data-type=' + type + ']').addClass('active');
});