为当前元素添加Active Class遇两类问题，求解决方案

针对你遇到的两个问题，我来一步步帮你解决：

问题1：刷新页面时“Show All”对应的filterDiv不显示 #

这是因为页面加载完成后，没有默认触发“Show All”的过滤逻辑，所有filterDiv默认处于隐藏状态。我们需要在页面加载完成时主动调用显示全部的函数，同时给“Show All”按钮加上active类。

问题2：点击其他按钮后，“Show All”的active类未移除 #

这是因为切换按钮状态时，没有先清除所有按钮的active类，再给当前点击的按钮添加。我们需要在每次点击按钮时，先遍历所有按钮移除active类，再给当前按钮加上。

完整代码示例 #

HTML结构

<div id="myBtnContainer">
  <button class="btn" onclick="filterSelection('all')"> Show all</button>
  <button class="btn" onclick="filterSelection('cars')"> Cars</button>
  <button class="btn" onclick="filterSelection('animals')"> Animals</button>
</div>

<div class="container">
  <div class="filterDiv cars">BMW</div>
  <div class="filterDiv animals">Cat</div>
  <div class="filterDiv cars">Ford</div>
  <div class="filterDiv animals">Dog</div>
  <div class="filterDiv cars">Fiat</div>
  <div class="filterDiv animals">Rabbit</div>
</div>

CSS样式

/* 按钮基础样式 */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

/* 按钮激活态样式 */
.btn.active {
  background-color: #666;
  color: white;
}

/* 过滤元素默认隐藏 */
.filterDiv {
  display: none;
  padding: 12px;
  margin: 8px;
  background-color: #f9f9f9;
}

/* 显示选中元素的类 */
.show {
  display: block;
}

JavaScript逻辑

// 页面加载完成后，默认触发Show All的过滤逻辑
window.addEventListener('load', function() {
  filterSelection('all');
});

function filterSelection(category) {
  const filterDivs = document.getElementsByClassName('filterDiv');
  const buttons = document.getElementsByClassName('btn');

  // 第一步：移除所有按钮的active类，避免多个按钮同时处于激活态
  for (let btn of buttons) {
    btn.classList.remove('active');
  }
  // 给当前点击的按钮添加active类
  event.currentTarget.classList.add('active');

  // 第二步：处理元素显示/隐藏逻辑
  const targetClass = category === 'all' ? '' : category;
  
  for (let div of filterDivs) {
    div.classList.remove('show');
    if (div.classList.contains(targetClass)) {
      div.classList.add('show');
    }
  }
}

关键修改说明 #

1. 页面加载触发默认过滤：通过window.addEventListener('load', ...)在页面完全加载后调用filterSelection('all')，确保刷新页面时自动显示所有元素，同时给“Show All”按钮加上active类。
2. 统一管理按钮active状态：在每次调用过滤函数时，先遍历所有按钮移除active类，再给当前点击的按钮添加，彻底解决多个按钮同时保留active状态的问题。

这样修改后，你的两个问题应该都能完美解决啦！

内容的提问来源于stack exchange，提问作者Rogerz Voonz KV