给定HTML结构与切换容器display的JS函数，为何无法正常生效？

我的代码没有抛出任何错误，但点击按钮后页面元素的display属性完全没变化。我是前端新手，麻烦帮忙看看问题出在哪。相关代码如下：

JS代码 #

function addEventListenerToMenuButtons() {
  const buttonContainer = document.querySelector(".features-list");

  if (buttonContainer) {
    buttonContainer.addEventListener('click', function(event) {
      const clickedButton = event.target.closest('.list-ul');

      if (clickedButton) {
        removeActiveClassFromAllButtons();
        clickedButton.classList.add("activeBtn");
        const buttonId = clickedButton.id;
        if(buttonId === "deliverable-tracker-btn-container") {
          showSectionContainer(buttonId);
        } else if(buttonId === "dashboard-btn-container") {
          showSectionContainer(buttonId);
          
        }
      }
    });
  }
}
function removeActiveClassFromAllButtons() {
  const buttons = document.querySelectorAll('.list-ul.activeBtn');
  buttons.forEach(function(button) {
    button.classList.remove("activeBtn");
  });
}
addEventListenerToMenuButtons();


function showSectionContainer(sectionId) {
  const sectionContainers = document.querySelectorAll('.section-container');
  const targetSection = document.getElementById(sectionId);

  sectionContainers.forEach(container => {
    container.style.display = container.id === sectionId ? "block" : "";
  });

  if (targetSection) {
    targetSection.style.display = "";
  }
}

HTML代码 #

<div class="side-bar">
  <ul class="features-list">
    <li class="features-item list-ul active" id="dashboard-btn-container">
        <div style="display:inline-flex">
          <button class="features-item-button">Dashboard</button>
        </div>
    </li>
    <li class="features-item list-ul active activeBtn" id="deliverable-tracker-btn-container">
        <div style="display:inline-flex">
          <button class="features-item-button">Deliverable Tracker</button>
        </div>
    </li>
  </ul>
</div>
<div class="container">
  <div class="section-container" id="dashboard-container">
    <div class="card" id="active-clients-card">
      <div class="kpi">5</div>
      <div class="label">Active Clients</div>
    </div>
    <div class="card" id="open-tasks-card">
      <div class="kpi">4</div>
      <div class="label">Open Tasks</div>
    </div>
    <div class="card" id="overdue-tasks-card">
      <div class="kpi">2</div>
      <div class="label">Overdue Tasks</div>
    </div>
  </div>
  <div class="section-container" id="deliverable-tracker-container" style="display: none">
    <h1>TESTING NEW SECTION - Deliverables</h1>
  </div>
</div>

问题出在两个核心点：

1. 按钮ID与容器ID不匹配 #

你传给showSectionContainer的是按钮的ID（比如dashboard-btn-container），但页面中对应的容器ID是dashboard-container，两者不匹配，导致找不到目标容器，自然无法修改display属性。

2. showSectionContainer函数的逻辑错误 #

函数里先通过循环给匹配的容器设置display:block，但后面又把目标容器的display设为空字符串，直接覆盖了之前的设置，等于白做。

修正后的代码： #

修正JS代码

function addEventListenerToMenuButtons() {
  const buttonContainer = document.querySelector(".features-list");

  if (buttonContainer) {
    buttonContainer.addEventListener('click', function(event) {
      const clickedButton = event.target.closest('.list-ul');

      if (clickedButton) {
        removeActiveClassFromAllButtons();
        clickedButton.classList.add("activeBtn");
        // 从按钮ID中提取容器ID（去掉-btn-container后缀）
        const sectionId = clickedButton.id.replace("-btn-container", "-container");
        showSectionContainer(sectionId);
      }
    });
  }
}

function removeActiveClassFromAllButtons() {
  const buttons = document.querySelectorAll('.list-ul.activeBtn');
  buttons.forEach(function(button) {
    button.classList.remove("activeBtn");
  });
}

addEventListenerToMenuButtons();

function showSectionContainer(sectionId) {
  const sectionContainers = document.querySelectorAll('.section-container');
  
  // 遍历所有容器，匹配的显示，不匹配的隐藏
  sectionContainers.forEach(container => {
    container.style.display = container.id === sectionId ? "block" : "none";
  });
}

修正HTML初始状态（可选，让初始状态更合理）

把第二个li的重复激活类调整，确保初始只有一个激活状态：

<li class="features-item list-ul active activeBtn" id="deliverable-tracker-btn-container">
<!-- 修改为 -->
<li class="features-item list-ul" id="deliverable-tracker-btn-container">

关键修改说明： #

• 通过replace("-btn-container", "-container")把按钮ID转换成对应的容器ID，省去重复的if判断。
• 删除showSectionContainer里多余的targetSection.style.display = ""代码，避免覆盖设置。
• 把隐藏容器的display设为none，逻辑更明确，替代空字符串的模糊效果。

这样修改后，点击按钮就能正确切换对应容器的显示状态了。

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