Question

我正在努力使当我点击div图像时弹出相应的内容框（即div从display:none;变为display:inline;）

['弹出'box = div with content]

我正在使用简单的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类中吗？或者将它放在一个单独的.diagram-content类中？

如何修改代码以将.active类添加/追加到应该弹出的活动框？或者最好的方法是修改display内相关内容框的css .click(function)？

Answer 1

您可以使用HTML5 data属性，而不是使用类。如果要使用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>

这有助于将样式与内容隔离开来。您可以使用data

访问$.data()媒体资源

$('.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');
});

请注意，使用纯CSS类可以实现相同的功能，但最好将数据与视图隔离开来。在这种情况下，将图表内容的样式与内容的含义隔离开来。

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

1 个答案: