Question

我有一个调色板：

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");
});

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

我想要的是：

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

谢谢。

Answer 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");
});

使用jQuery的活动和非活动DIV

1 个答案: