JS移除全部元素active类并为点击目标添加active失效如何解决

核心问题1：图标元素未正确渲染，无点击区域 #

你直接给普通div设置content属性属于错误用法，content仅对::before/::after伪元素生效，导致你的四个.master-feature div实际是0宽0高的空元素，无法被点击，事件自然不会触发。

核心问题2：JS执行时机错误 #

如果你的JS代码放在<head>标签内，执行时DOM还未加载完成，document.getElementsByClassName无法获取到目标元素，事件绑定失败。

核心问题3：事件目标匹配风险 #

用e.target获取点击元素时，如果后续给div内部添加子元素，会出现目标匹配错误。

修复步骤 #

1. 修复CSS渲染与可点击区域 #

给所有图标元素统一设置基础样式，修正content的错误用法：

/* 公共样式，所有图标通用 */
.master-feature {
  width: 32px; /* 根据你的图标尺寸调整 */
  height: 32px;
  margin-right: 10px;
  margin-top: 20px;
  float: left;
  cursor: pointer; /* 鼠标悬浮显示手型，提示可点击 */
  animation: pulsate 3s ease-out infinite;
}

/* 单个图标样式，用background替代错误的content写法，或者挪到伪元素 */
.icon-feature1 {
  background: url("/static/img/feature1_blue.svg") center/100% no-repeat;
}
.icon-feature1.active {
  background-image: url("/static/img/feature1.svg");
  animation-play-state: paused;
}

/* 按相同规则补全icon-feature2、3、4的样式 */
.icon-feature2 {
  background: url("/static/img/feature2_blue.svg") center/100% no-repeat;
}
.icon-feature2.active {
  background-image: url("/static/img/feature2.svg");
  animation-play-state: paused;
}
/* 以此类推补全3、4的样式 */

2. 修复JS事件绑定逻辑 #

调整JS执行时机，优化事件绑定逻辑：

// 等待DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', () => {
  // 用querySelectorAll获取静态元素集合，比动态的HTMLCollection更稳定
  const swapactive = document.querySelectorAll('.master-feature');

  // 绑定点击事件
  swapactive.forEach(el => el.addEventListener('click', activateClass));

  function activateClass(e) {
    // 移除所有元素的active类
    swapactive.forEach(el => el.classList.remove('active'));
    // 用currentTarget获取绑定事件的元素，避免子元素触发的匹配错误
    e.currentTarget.classList.add('active');
  }
})

3. 调试验证 #

如果修复后还是没有效果，可以先给.master-feature加临时边框样式border: 1px solid red;，确认元素是否正常渲染、有可点击的区域；也可以在activateClass函数内加console.log('点击触发')，验证事件是否正常绑定。

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