使用jQuery强制设置input按钮为:active状态的实现方法咨询

核心原因说明 #

:active 是浏览器原生提供的CSS伪类，和你手动添加的.active自定义类是完全独立的两个规则。你之前看到的加类生效的方案，前提是对应CSS里主动把.active类的样式和:active伪类的样式做了绑定，你的项目里没有写对应的CSS规则，当然加类不会有效果。
另外Chrome DevTools的强制:active状态是浏览器内核层面的调试能力，JavaScript（包括jQuery）没有直接修改元素伪类状态的原生API，伪类是浏览器根据交互行为自动维护的，不属于可修改的DOM属性。

可实现同等效果的落地方案 #

方案1：CSS规则绑定（最推荐） #

你只需要修改你的CSS代码，把原来:active伪类的匹配规则扩展到同时匹配自定义类即可：

/* 你原来的按钮激活样式规则 */
.checkout-btn:active {
  /* 原有的样式：比如背景色、内边距偏移、边框样式等 */
  background: #d0d0d0;
  transform: translateY(1px);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

/* 新增：给自定义激活类加相同的样式 */
.checkout-btn.forced-active {
  background: #d0d0d0;
  transform: translateY(1px);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

也可以直接合并写简化代码：

.checkout-btn:active, .checkout-btn.forced-active {
  background: #d0d0d0;
  transform: translateY(1px);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

之后用jQuery操作类即可实现和强制:active完全一致的效果：

// 激活状态
$('#btn25').addClass('forced-active');
// 取消激活
$('#btn25').removeClass('forced-active');

方案2：无需修改CSS的兼容方案（不推荐） #

如果不方便修改现有CSS，可以用JS读取:active伪类的样式，动态注入到自定义类中，不过兼容性和性能都不如方案1，一般不建议使用。

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