0

我正在努力做到这一点，以便当我单击 div 图像时会弹出相应的内容框（即 div 从display:none;变为display:inline;）。

http://jsfiddle.net/sergep/gXRRw/

['弹出'框 = 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)？

4

1 回答 1

1

data您可以使用 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>

这有助于将您的样式与内容隔离开来。您可以使用访问该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 类来实现相同的目的，但最好将数据与视图隔离开来。在这种情况下，将图表内容的样式与内容的含义隔离开来。

于 2013-10-21T13:19:33.073 回答