如何用CSS和JavaScript实现表格筛选按钮的激活样式切换

DevOps 小满

2026-7-27

问题与解决方案

我需要实现点击表格筛选按钮时，按钮呈现和“Individual”按钮一致的激活样式，点击“Team”等其他按钮时也能触发相同效果。

核心问题分析

当前代码中点击按钮会触发页面跳转，导致JavaScript添加的active类在页面刷新后丢失。需要通过服务端（ColdFusion）根据URL参数动态设置按钮的激活状态，同时调整JavaScript逻辑适配场景。

1. 修改ColdFusion代码：动态设置激活按钮

不再固定给Individual按钮添加active类，而是根据当前url.type的值自动匹配对应按钮：

<div class="relative" style="display:flex;flex-direction: row;align-items: center;justify-content: flex-end;">
     <br>
     <br>
        <p align="right" style="max-width:100%;font-size:20px;">Filter by: 
        <div id="myBtnContainer">
            <button class="btn <cfif url.type eq 'Individual'>active</cfif>"  onClick="window.location = 'leaderboard.cfm?type=Individual';filterSelection('Individual')">Individual</button>
            <button class="btn <cfif url.type eq 'Team'>active</cfif>"  onClick="window.location = 'leaderboard.cfm?type=Team';filterSelection('Team')">Team</button>
            <button class="btn <cfif url.type eq 'Community'>active</cfif>"  onClick="window.location = 'leaderboard.cfm?type=Community';filterSelection('Community')">Community</button>
            <button class="btn <cfif url.type eq 'Organization'>active</cfif>"  onClick="window.location = 'leaderboard.cfm?type=Organization';filterSelection('Organization')">Organization</button>
        </div>
        </p>
    </div>

<table style="width:100%; border:solid 1px #DDD;" class="leaderboard-table">    
<cfif url.type eq 'Individual'> 
        <thead>
          <tr style="background-color:#3e6934; color:white; text-align:center;height:100px;" class="filterDiv Individual">
            <th style="width:80px">Rank</th>
            <th style="width:210px">Name</th>
            <th style="width:50px">Level</th>
            <th style="width:120px">Community</th>
            <th>Organization</th>
            <th>Team</th>
            <th style="width:80px">Action Points</th>
            <th style="width:80px">Knowledge Points</th>
            <th style="width:80px">Carbon Credits</th>
            <th style="width:80px">Total Points</th>
          </tr>
      </thead>
<tr leader-board-individual data--member-id="#Individual.id#">
                <td leaderboard-counter></td>
                <td align="left">#name#</td>
                <td><span class="leader-board-user_level"></span></td>
                
                <td align="left">#Individuals_Team.Location#</td>
                <td align="left">#Individuals_Team.Parent_Organization_Name#</td>
                <td align="left">#Individuals_Team.name#</td>
                
                <td><span class="leader-board-action_points"></span></td>
                <td><span class="leader-board-knowledge_points"></span></td>
                <td><span class="leader-board-carbon_credits"></span></td>
                <td><span class="leader-board-total_points"></span></td>
              </tr>
<cfelseif url.type eq 'Team'>
<thead>
        <tr style="background-color:#3e6934; color:white; text-align:center;height:100px;" class="filterDiv Team">
            <th style="width:80px">Rank</th>           
            <th style="width:250px">Team</th>
            <th>Green Certified Organization</th>
            <th>Community</th>
            <th>Members</th>
            <th style="width:80px">Total Action Points</th>
            <th style="width:80px">Total Knowledge Points</th>
            <th style="width:80px">Total Carbon Credits</th>
         </tr>
       </thead>  
<tr leader-board-team data--member-id="#Individual.id#">
            <td leaderboard-counter></td>
                <td align="left"></td>
                <td align="left"></td>
                
                <td align="left"></td>
                <td align="left"></td>
                
                <td></td>
                <td></td>
                <td></td>
    
              </tr>
<!-- 补充其他类型的cfif判断，保持原有逻辑 -->
</cfif>

2. 调整JavaScript代码：适配页面跳转场景

修改初始化逻辑，根据URL参数自动加载对应筛选，并优化按钮点击事件：

// 页面加载时根据URL参数初始化筛选状态
document.addEventListener('DOMContentLoaded', function() {
    var currentType = new URLSearchParams(window.location.search).get('type') || 'Individual';
    filterSelection(currentType);
    
    // 按钮点击事件，兼容无刷新交互场景
    var btnContainer = document.getElementById("myBtnContainer");
    var btns = btnContainer.getElementsByClassName("btn");
    for (var i = 0; i < btns.length; i++) {
      btns[i].addEventListener("click", function(){
        // 移除所有按钮的激活状态
        document.querySelectorAll('.btn.active').forEach(btn => btn.classList.remove('active'));
        // 给当前点击的按钮添加激活状态
        this.classList.add('active');
      });
    }
});

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  // 先隐藏所有筛选内容
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
  }
  // 显示对应类别的内容
  if (c) {
    var targetElements = document.getElementsByClassName(c);
    for (i = 0; i < targetElements.length; i++) {
      w3AddClass(targetElements[i], "show");
    }
  } else {
    // 默认显示Individual内容
    var targetElements = document.getElementsByClassName("Individual");
    for (i = 0; i < targetElements.length; i++) {
      w3AddClass(targetElements[i], "show");
    }
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

3. CSS代码保持不变

现有.btn.active样式已满足需求，无需修改：

table{
  border-spacing:0px 0px; 
  width: 100%;
  color:#565454;
  border-collapse:collapse;
}
table th,table tr td{
        border-bottom: 1px solid #d8d8d8;
        border-left: 1px solid #d8d8d8;
        border-right: 1px solid #d8d8d8;
        height:50px;        
    font-size:20px;
    }
th{
        font-size:20px;
        color:white;
        font-weight:lighter;
    }
    thead{
        background:var(--darkgreen);
        height:50px;
    }
td:nth-child(2){
        text-align:center;
        padding:0 10px;
        font-size:20px;
    }
    td:nth-child(3){
        text-align:center;
        padding:0 10px;
        font-size:20px;
    }
    td:nth-child(3){
        
        font-size:20px;
    }
  tbody td{
    color:var(--black);
    text-align:center;
    height:50px;
  }
  .btn{
    background-color:lightgray;
    border:none;
    color:var(--black);
    font-size:16px;
    padding:0 1em;
    margin:1em 0.5em
  }

.btn.active{
    background-color:white;
    border: orange 1px solid;

}

效果说明

页面跳转后，ColdFusion会根据当前URL的type参数自动给对应按钮添加active类，确保激活状态不会丢失。
按钮点击时，JavaScript会临时切换激活状态，同时服务端逻辑保证页面刷新后的状态正确。
原有激活样式（白色背景+橙色边框）会应用到所有被点击激活的按钮上。

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