jquery点击变色

jQuery点击变色实现方法

使用jQuery实现点击元素后变色效果，可以通过以下方式完成：

HTML结构示例

<div class="color-change">点击我变色</div>
<button class="btn-toggle">切换颜色</button>

基础点击变色

$('.color-change').click(function() {
  $(this).css('background-color', 'red');
});

切换颜色实现

$('.color-change').click(function() {
  $(this).toggleClass('active');
});

// CSS部分
.active {
  background-color: blue;
  color: white;
}

多颜色轮换

var colors = ['red', 'green', 'blue', 'yellow'];
var current = 0;

$('.color-change').click(function() {
  current = (current + 1) % colors.length;
  $(this).css('background-color', colors[current]);
});

带渐变动画效果

$('.color-change').click(function() {
  $(this).animate({
    backgroundColor: '#ff0000',
    color: '#ffffff'
  }, 500);
});

注意事项

• 确保已引入jQuery库
• 更复杂的颜色操作可以使用jQuery UI颜色动画插件
• 对于大量元素，建议使用事件委托

以上方法可以根据实际需求选择使用，最简单的实现是使用toggleClass方法配合CSS样式。