点击Div无法取消高亮：需实现点击元素切换高亮状态

没问题！我帮你实现这个点击切换高亮的功能，下面是完整的可运行代码，逻辑清晰还容易维护：

HTML结构 #

我给每个控制按钮加了data-targets属性，用来明确指定它要控制的Div选择器，这样后续修改控制目标时不用动JS代码，更灵活：

<div class="control-btn" data-targets=".d-rec">A</div>
<div class="control-btn" data-targets=".d-rec, .c-rec">B</div>
<div class="control-btn" data-targets=".l-rec">C</div>

<div class="d-rec">第一个Div</div>
<div class="c-rec">第二个Div</div>
<div class="l-rec">第三个Div</div>

CSS样式 #

定义高亮的视觉效果，你可以根据自己的UI需求调整颜色、边框等：

/* 高亮样式 */
.highlight {
  background-color: #ffeb3b;
  border: 2px solid #fbc02d;
  padding: 8px;
  margin: 4px 0;
}

/* 控制按钮的样式，让点击区域更明显 */
.control-btn {
  display: inline-block;
  padding: 6px 12px;
  margin: 5px;
  background-color: #e0e0e0;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}

JavaScript逻辑 #

核心用classList.toggle()方法实现切换，它会自动判断元素是否有高亮类，有就移除，没有就添加，完美符合你的需求：

// 获取所有控制按钮
const controlBtns = document.querySelectorAll('.control-btn');

// 给每个按钮绑定点击事件
controlBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 拆分按钮对应的目标选择器
    const targetSelectors = btn.dataset.targets.split(', ');
    
    // 遍历每个选择器，找到对应元素并切换高亮类
    targetSelectors.forEach(selector => {
      const targetElements = document.querySelectorAll(selector);
      targetElements.forEach(el => {
        el.classList.toggle('highlight');
      });
    });
  });
});

代码说明 #

• data-targets属性：把控制逻辑和HTML结构解耦，比如想让B按钮控制第二个和第三个Div，直接改属性为.c-rec, .l-rec就行，不用修改JS。
• classList.toggle()：这是实现切换的关键API，省去了手动判断类是否存在的麻烦，代码更简洁。
• 事件绑定：用forEach给每个按钮绑定点击事件，逻辑清晰易懂，新手也能快速理解。

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