如何为菜单按钮关联不同颜色的div以标记激活状态？

我是一名JavaScript初学者，正在解决以下问题：我有一个菜单，每个按钮对应其下方的div，每个div用不同的颜色表示“激活”状态。点击Link 1时，我希望对应的div变为蓝色，其余保持白色；点击Link 2时，对应的div变为红色，其余保持白色，以此类推。目前所有按钮点击后对应的div都会变色，但点击下一个按钮时，之前变色的div仍保持颜色。请问有人知道如何解决这个问题吗？

现有代码 #

HTML #

<body class="container">
        <div class="body">
            <aside class="sidebar">
            
                <nav id="menu-desc">                  
                    <button  class="button" id="button1">Link 1</button>
                    <div class="menu-item-box"  id="box1"></div>                 
                   <button class="button" id="button2">Link 2</button>
                    <div class="menu-item-box"  id="box2"></div>                
                    <button class="button" id="button3">Link 3</button>
                    <div class="menu-item-box"  id="box3"></div>                
                    <button class="button" id="button4">Link 4</button>
                    <div class="menu-item-box"  id="box4"></div>                                   
                    <button class="button" id="button5">Link 5</button>
                    <div class="menu-item-box"  id="box5"></div>                              
                </nav>     
            </aside>   

    <script src="index.js"></script>
  </body>

CSS #

* {
    box-sizing: border-box;
    margin: 10px;
    top: 0;
  }

.body {
  display: flex;
 }
  
/* == Menu == */
  
.sidebar {
   width: 500px;    
}

.button {
  display: flex;
  height: 2em;
  color: black;
  text-decoration: none;
  font-size: 1em;
  text-transform: uppercase;
  padding-left: calc(5px + 3vw);
  background-color: transparent;
  border-style: none;
 }
  
.menu-item-box {
  height: 3em;
  border-top: 3px solid black;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  background-color: transparent;
}

JavaScript #

let button1 = document.querySelector("#button1");
        button1.addEventListener('click',function(){
        document.querySelector("#box1").style.backgroundColor="Blue";
        });

let button2 = document.querySelector("#button2");
        button2.addEventListener('click',function(){
        document.querySelector("#box2").style.backgroundColor="red";
        });

let button3 = document.querySelector("#button3");
        button3.addEventListener('click',function(){
        document.querySelector("#box3").style.backgroundColor="green";
        });

let button4 = document.querySelector("#button4");
        button4.addEventListener('click',function(){
        document.querySelector("#box4").style.backgroundColor="yellow";
        });

let button5 = document.querySelector("#button5");
        button5.addEventListener('click',function(){
        document.querySelector("#box5").style.backgroundColor="purple";
        });

问题核心是你只给当前点击的按钮对应div设置颜色，没有重置其他div的状态。下面是优化后的实现，同时简化重复代码：

优化后代码 #

HTML（仅添加数据属性关联按钮与div） #

<body class="container">
        <div class="body">
            <aside class="sidebar">
            
                <nav id="menu-desc">                  
                    <button class="button" data-target="box1">Link 1</button>
                    <div class="menu-item-box" id="box1"></div>                 
                    <button class="button" data-target="box2">Link 2</button>
                    <div class="menu-item-box" id="box2"></div>                
                    <button class="button" data-target="box3">Link 3</button>
                    <div class="menu-item-box" id="box3"></div>                
                    <button class="button" data-target="box4">Link 4</button>
                    <div class="menu-item-box" id="box4"></div>                                   
                    <button class="button" data-target="box5">Link 5</button>
                    <div class="menu-item-box" id="box5"></div>                              
                </nav>     
            </aside>   

    <script src="index.js"></script>
  </body>

CSS（调整初始背景色为白色） #

* {
    box-sizing: border-box;
    margin: 10px;
    top: 0;
  }

.body {
  display: flex;
 }
  
/* == Menu == */
  
.sidebar {
   width: 500px;    
}

.button {
  display: flex;
  height: 2em;
  color: black;
  text-decoration: none;
  font-size: 1em;
  text-transform: uppercase;
  padding-left: calc(5px + 3vw);
  background-color: transparent;
  border-style: none;
  cursor: pointer; /* 添加鼠标指针样式提升交互体验 */
 }
  
.menu-item-box {
  height: 3em;
  border-top: 3px solid black;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  background-color: white; /* 设置初始白色背景 */
}

JavaScript（重构为批量处理逻辑） #

// 存储每个div对应的激活颜色
const boxColorMap = {
  box1: "blue",
  box2: "red",
  box3: "green",
  box4: "yellow",
  box5: "purple"
};

// 获取所有按钮和所有目标div
const buttons = document.querySelectorAll(".button");
const allBoxes = document.querySelectorAll(".menu-item-box");

// 为每个按钮绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    // 第一步：重置所有div的背景色为初始白色
    allBoxes.forEach(box => {
      box.style.backgroundColor = "white";
    });
    
    // 第二步：获取当前按钮对应的div，设置激活颜色
    const targetBoxId = button.dataset.target;
    const targetBox = document.getElementById(targetBoxId);
    if (targetBox) {
      targetBox.style.backgroundColor = boxColorMap[targetBoxId];
    }
  });
});

关键改进点 #

1. 重置状态：每次点击按钮时，先遍历所有menu-item-box，将它们的背景色重置为白色，确保之前激活的div恢复初始状态。
2. 代码复用：用querySelectorAll批量获取元素，避免重复定义多个按钮变量和事件监听，后续新增按钮只需添加对应data-target和颜色映射即可。
3. 数据关联：通过data-target属性将按钮与对应的div绑定，逻辑更清晰，避免硬编码id。

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