使用jQuery的活动和非活动DIV

时间:2010-12-12 09:49:50

标签: jquery html

我有一个调色板:

CSS

.colors {width:75px;height:75px;background-color:red;border:1px solid #000;}
.highlight {width:75px;height:75px;background-color:red;border:2px solid #000;}

HTML

<div class="colors">Red</div>
<div class="colors">blue</div>
<div class="colors">green</div>

用户应该选择他想要的颜色, 所以我希望用户选择的颜色边框为2px;

$("div").click(function () {
  $(this).toggleClass("highlight");
});

这样可以正常工作,但是当我点击其他颜色时,旧颜色仍然处于活动状态,当我点击相同颜色时,它变为非活动状态,我不希望这样。

我想要的是:

  1. 活动时边框更改。
  2. 如果我点击另一个,旧的变为不活动。
  3. 当我再次点击活动状态时,我不想发生任何事情,因为它已经激活了。
  4. 谢谢。

1 个答案:

答案 0 :(得分:1)

你想要的是这样的:

$("div").click(function () {
  $(this).addClass("highlight").siblings().removeClass("highlight");
});

You can test it out here。这样做只是通过点击添加课程(不要切换它以便它可以脱落)通过.addClass()然后那些.siblings()通过.removeClass()删除课程。


如果您的示例已关闭并且他们不是兄弟姐妹,只需在与.removeClass()处理程序相同的选择器上使用.click(),然后再将其添加到单击的元素中,如下所示:

$("div").click(function () {
  $("div").removeClass("highlight");
  $(this).addClass("highlight");
});