Angular中点击卡片时如何添加类并实现颜色变化？

核心思路是：点击卡片时，先清除所有卡片的激活类，再给当前点击的卡片添加激活类，配合CSS定义激活状态的颜色与样式。

1. 基础HTML结构 #

假设你的分类卡片结构如下（初始可给默认选中项加active类）：

<div class="category-cards">
  <div class="category-card active">分类1</div>
  <div class="category-card">分类2</div>
  <div class="category-card">分类3</div>
  <div class="category-card">分类4</div>
  <div class="category-card">分类5</div>
</div>

2. CSS样式定义 #

设置卡片默认样式和激活状态的颜色：

/* 默认卡片样式 */
.category-card {
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0 5px;
  transition: all 0.3s ease; /* 添加入场动画更顺滑 */
}

/* 激活状态样式 */
.category-card.active {
  color: #ffffff;
  background-color: #2563eb; /* 可替换为你需要的颜色 */
  border-color: #2563eb;
}

3. JavaScript实现逻辑 #

原生JS方案（无依赖）

// 获取所有分类卡片
const cards = document.querySelectorAll('.category-card');

// 为每个卡片绑定点击事件
cards.forEach(card => {
  card.addEventListener('click', function() {
    // 移除所有卡片的激活类
    cards.forEach(item => item.classList.remove('active'));
    // 给当前点击的卡片添加激活类
    this.classList.add('active');
    
    // 这里保留你原有的筛选逻辑，比如根据卡片内容展示对应信息
    // 示例：showContent(this.textContent);
  });
});

动态生成卡片的处理（事件委托）

如果卡片是后端动态渲染的，用事件委托绑定到父元素，避免事件失效：

const cardContainer = document.querySelector('.category-cards');

cardContainer.addEventListener('click', function(e) {
  const targetCard = e.target.closest('.category-card');
  if (!targetCard) return;
  
  // 清除所有激活类
  cardContainer.querySelectorAll('.category-card').forEach(item => item.classList.remove('active'));
  // 激活当前卡片
  targetCard.classList.add('active');
  
  // 执行你的筛选逻辑
});

jQuery方案（如果项目已引入jQuery）

$('.category-card').on('click', function() {
  $('.category-card').removeClass('active');
  $(this).addClass('active');
  
  // 你的筛选逻辑代码
});

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