点击按钮移除元素原有class并添加新class的jQuery实现及CSS配置方法

jQuery 实现代码 #

针对你给出的HTML结构（按钮在box div内部），可以直接通过父元素匹配来操作对应节点，代码如下：

$('.button').click(function() {
  // this指向当前点击的按钮，匹配父级box元素后链式操作类
  $(this).parent('.box').removeClass('box').addClass('active');
})

如果页面中只有唯一一个box类的div，也可以直接选中目标元素操作：

$('.button').click(function() {
  $('.box').removeClass('box').addClass('active');
})

如果你的按钮是后续动态加载到页面中的，可以用事件委托写法避免绑定失效：

$(document).on('click', '.button', function() {
  $(this).parent('.box').removeClass('box').addClass('active');
})

CSS中active类的添加规则 #

active类的添加方式和普通类完全一致，直接用类选择器定义样式即可，示例如下：

.active {
  /* 按需编写你需要的样式即可，举个例子：*/
  background: #2563eb;
  color: #fff;
  border-radius: 4px;
  padding: 12px;
}

注意你操作类的时候已经移除了原有的box类，所以原box类定义的所有样式都会失效，只有active类的样式会作用在该div上；如果需要保留box的基础样式，无需调用removeClass('box')，直接叠加active类即可。

内容的提问来源于stack exchange，提问作者anuj tanwar