jquery点击变色

使用jQuery实现点击变色效果

通过jQuery可以轻松实现元素点击后改变颜色的效果。以下是几种常见方法：

方法1：使用toggleClass切换CSS类

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

对应的CSS样式：

.highlight {
  background-color: #ff0000;
  color: #ffffff;
}

方法2：直接修改CSS属性

$("#targetElement").click(function() {
  $(this).css({
    "background-color": "#00ff00",
    "color": "#000000"
  });
});

方法3：使用data属性存储状态

$("#targetElement").click(function() {
  if ($(this).data("clicked")) {
    $(this).css("background-color", "").data("clicked", false);
  } else {
    $(this).css("background-color", "#0000ff").data("clicked", true);
  }
});

方法4：多元素轮流变色

$(".items").click(function() {
  $(".items").removeClass("active");
  $(this).addClass("active");
});

注意事项

• 确保DOM加载完成后再绑定事件，可以将代码放在$(document).ready()中
• 考虑添加过渡效果增强用户体验：

  #targetElement {
  transition: background-color 0.3s ease;
  }

以上方法可以根据具体需求选择使用，第一种方法推荐用于大多数场景，因其实现了样式与行为的分离。