原生JS实现点击元素设红背景其余变白，旧激活态不消失如何修改？

你当前的实现仅对被点击元素执行active类切换操作，没有清除其余面板元素上已有的active类，因此之前的激活元素会一直保留红色背景。

var panel = document.getElementById('panels'); // 父容器

panel.addEventListener('click', function (e) {
    var target = e.target; // 点击的元素
    while (target && target.parentNode !== panel) {
        target = target.parentNode; // 处理点击元素不是直接子元素的情况
        if (!target) { return; } // 元素不存在直接终止
    }
    // 判断点击的是panel元素
    if (target.classList.contains('panel')) {
        // 第一步：移除所有panel的active类
        document.querySelectorAll('.panel').forEach(item => {
            item.classList.remove('active');
        });
        // 第二步：给当前点击的元素添加active类
        target.classList.add('active');
    }
});

• 把原来的target.tagName === 'DIV'判断替换为target.classList.contains('panel')，判断逻辑更精准，避免父容器内其他非panel的div元素误触发逻辑
• 新增遍历所有panel清除active类的逻辑，保证同一时间只有一个激活元素
• 把原来的toggle改为add，符合单选激活的需求，避免点击当前已激活的元素时取消激活状态，如果需要支持点击激活元素取消选中，改回toggle即可。

内容的提问来源于stack exchange，提问作者The Dead Man