Angular实现点击元素切换白色背景高亮效果的技术求助

给你一套直接能用的实现代码，分三部分：

1. 完整HTML结构 #

把元素、样式和脚本整合到一起：

<div class="oval">1</div>
<div class="oval">2</div>
<div class="oval">3</div>

<style>
/* 默认样式 */
.oval {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 20px;
    background-color: #ccc; /* 默认灰色背景 */
    cursor: pointer;
    user-select: none;
}

/* 点击激活后的样式 */
.oval.active {
    background-color: #fff; /* 白色背景 */
}
</style>

<script>
// 获取所有oval元素
const ovals = document.querySelectorAll('.oval');

// 给每个元素绑定点击事件
ovals.forEach(oval => {
    oval.addEventListener('click', function() {
        // 先移除所有元素的active类
        ovals.forEach(item => item.classList.remove('active'));
        // 给当前点击的元素添加active类
        this.classList.add('active');
    });
});
</script>

2. 逻辑说明 #

• 通过querySelectorAll获取所有带oval类的元素
• 每个元素被点击时，先遍历所有元素移除active类，确保其他元素恢复默认背景
• 再给当前点击的元素添加active类，触发白色背景样式

这样就能实现你要的效果：点击哪个元素，哪个背景变白，之前变白的元素自动恢复原状。

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