如何让内含SVG的按钮点击时切换激活状态并变色？

问题 #

需要实现一排按钮点击切换激活状态，点击后滚动到对应内容区域，已实现鼠标悬停时SVG变色，但点击时SVG变色不生效，现有JavaScript代码未达到预期效果。

问题分析 #

1. CSS选择器错误：原CSS中.btn :hover的空格会选中.btn的子元素而非按钮本身的hover状态；且.active的fill样式无法覆盖SVG内部rect的内联fill="white"（内联样式优先级更高）。
2. JavaScript className操作隐患：直接拼接字符串修改className会导致重复添加active类，逻辑不够健壮。

修复方案 #

1. 修正CSS样式 #

调整选择器，针对激活状态下的SVG矩形设置填充色，同时修正hover状态的选择器：

#myDIV {
  display: flex;
  position: relative;
  bottom: -320px;
}

.scrollbar_nav_list {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  border: none;
  cursor: pointer;
  outline: none;
  background: transparent; /* 确保按钮背景不遮挡SVG */
}

/* 悬停时SVG矩形变色 */
.btn:hover rect {
  fill: #FB9DA0;
}

/* 激活状态下SVG矩形变色 */
.btn.active rect {
  fill: #FB9DA0;
}

2. 优化JavaScript代码 #

使用classList操作类名避免字符串拼接问题，同时添加滚动到指定区域的逻辑（需给按钮添加data-target属性对应目标区域ID）：

<!-- 给每个按钮添加data-target属性关联目标区域 -->
<div id="myDIV">
  <button class="btn" data-target="#section1"> 
    <svg width="104" height="10" viewBox="0 0 104 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="104" height="10" rx="5" fill="white"/>
    </svg>
  </button> 

  <button class="btn active" data-target="#section2"> 
    <svg width="104" height="10" viewBox="0 0 104 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="104" height="10" rx="5" fill="white"/>
    </svg>
  </button> 

  <button class="btn" data-target="#section3"> 
    <svg width="104" height="10" viewBox="0 0 104 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="104" height="10" rx="5" fill="white"/>
    </svg>
  </button> 

  <button class="btn" data-target="#section4"> 
    <svg width="104" height="10" viewBox="0 0 104 10" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="104" height="10" rx="5" fill="white"/>
    </svg>
  </button> 
</div>

const header = document.getElementById("myDIV");
const btns = header.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    // 移除所有按钮的active类
    Array.from(btns).forEach(btn => btn.classList.remove("active"));
    // 给当前点击的按钮添加active类
    this.classList.add("active");
    
    // 平滑滚动到指定区域
    const targetId = this.getAttribute("data-target");
    if (targetId) {
      const targetElement = document.querySelector(targetId);
      targetElement?.scrollIntoView({ behavior: 'smooth' });
    }
  });
}

说明 #

• CSS通过.btn.active rect直接选中激活按钮内的SVG矩形，覆盖其内部fill属性；
• 使用classList操作类名更安全，避免重复添加类；
• 滚动逻辑依赖data-target属性，需确保页面中存在对应ID的内容区域。

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