如何实现激活时修改标签颜色、失活后自动恢复原有颜色的功能

要实现激活状态改色、失活自动恢复的效果，核心逻辑是通过专属CSS类控制激活态样式，切换标签时统一清空所有标签的激活类，仅给当前选中标签添加即可，具体修改步骤如下：

1. 新增CSS激活态样式 #

在原有CSS代码末尾添加激活类的样式，颜色可根据需求自定义：

/* 标签激活状态样式 */
.city.active {
  background-color: #bbb; /* 激活状态背景色，可替换为你想要的颜色 */
}

2. 修正HTML代码 #

原有London按钮重复定义了id属性，先删除多余id，同时添加默认激活类（因为默认显示London对应的内容）：

<!-- 修改后的London按钮 -->
<button id="london" class="city active">London</button>

Paris和Tokyo按钮的代码无需修改。

3. 修改JS代码 #

有两种修改方式可选：

方案一：优化原有代码（减少重复逻辑，推荐） #

替换原有全部JS代码即可：

// 统一获取所有标签和对应内容
const cityBtns = document.querySelectorAll('.city')
const cityTexts = document.querySelectorAll('.text')

// 初始化默认隐藏巴黎、东京的内容
cityTexts[1].style.display = 'none'
cityTexts[2].style.display = 'none'

// 给所有标签绑定点击事件
cityBtns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    // 重置所有标签的状态：移除激活类、隐藏对应内容
    cityBtns.forEach(item => item.classList.remove('active'))
    cityTexts.forEach(text => text.style.display = 'none')
    // 激活当前选中的标签、显示对应内容
    btn.classList.add('active')
    cityTexts[index].style.display = 'block'
  })
})

方案二：在原有代码基础上修改 #

如果不想改动原有代码结构，只需要在每个点击事件里增加激活类的切换逻辑即可，以London的点击事件为例：

london.addEventListener('click', function() {
  // 先清空所有标签的激活类
  london.classList.remove('active')
  paris.classList.remove('active')
  tokyo.classList.remove('active')
  // 给当前点击的标签加激活类
  london.classList.add('active')
  // 原有内容切换逻辑保持不变
  paris_text.style.display = "none";
  tokyo_text.style.display = "none";
  london_text.style.display = "block";
});

Paris和Tokyo的点击事件参照上面的逻辑修改即可。

• 香蕉、苹果、橙子、番石榴、柠檬都是非常不错的水果
• 我有一盆粉色的仙人掌，喜爱玫瑰、紫罗兰，也很喜欢冰淇淋

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