原生JS实现Tab点击切换div显示隐藏时旧区块不隐藏问题求助

问题描述 #

我想实现基于选中的Tab切换对应div显示隐藏的效果：点击Tab1显示对应Section1，点击Tab2则隐藏Section1并显示Section2，所有Tab点击均遵循该逻辑，隐藏当前激活区块后展示点击对应区块。
目前点击Tab时目标区块可正常显示，但此前激活的区块不会隐藏，我判断问题出在displaySection函数，但无法定位具体故障点。我搜索到的解决方案均为jQuery实现，需要纯JavaScript的解决方法。

原始代码 #

JS代码 #

function activeTab(evt, id) {
           
           // Get all elements with class="tablinks" and remove the class "active"
            let tabactive = document.getElementsByClassName("TabButtonSelected");
            tabactive[0].className = tabactive[0].className.replace(" TabButtonSelected", "");

            document.getElementById(id).style.display = "block";
            evt.currentTarget.className += " TabButtonSelected";

            displaySection(evt,id)
        }
        
function displaySection(evt, id) {

            let tabactive = document.getElementsByClassName("tab-section");
            tabactive[0].className = tabactive[0].className.replace(" d-chart-show", "d-chart-n");

          
            document.getElementById("Section" + id).style.display = "block";
            evt.currentTarget.className += " d-chart-show";

}

CSS代码 #

.container {
  width: 50%
}
.d-flex{
  display: flex;
   width: 100%;
}
.d-flex-col{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.text-center {
  text-align: center;
}
.TabButton {
      width: 100%;
    color: #5A5A61;
    border: 0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #FFFFFF;
    margin: 0;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
    padding: 16px;
    cursor: pointer;
}
.TabButtonSelected {

    color: #7A1315 !important;
    border-bottom-color: #C94927 !important;
    font-weight: 500;
}
.d-chart-n {
  display: none;
}

.d-chart-show {
  display: block;
}

HTML代码 #

<div class="container">

<div class="d-flex">
      <div class="d-flex text-center"> 
        <div class="TabButton TabButtonSelected" id="Tab1" onclick="activeTab(event, 'Tab1')"> Tab 1</div>
        <div class="TabButton "id="Tab2" onclick="activeTab(event, 'Tab2')">Tab 2</div>
        <div class="TabButton " id="Tab3" onclick="activeTab(event, 'Tab3')">Tab 3</div>
        <div class="TabButton " id="Tab4" onclick="activeTab(event, 'Tab4')">Tab 4</div>
        </div>
</div>
<div class="d-flex-col">
  <div id="SectionTab1" class="tab-section d-chart-n d-chart-show" > Tab 1 Section</div>
  <br/>
   <br/>
  <div id="SectionTab2" class="tab-section d-chart-n"> Tab 2 Section</div>
   <br/>
    <br/>
  <div id="SectionTab3" class="tab-section d-chart-n"> Tab 3 Section</div>
   <br/> 
   <br/>
  <div id="SectionTab4" class="tab-section d-chart-n"> Tab 4 Section</div>
   <br/>
   <br/>
</div>

</div>

问题排查 #

原有代码故障点如下：

• 处理内容区隐藏时仅操作了第一个tab-section元素，未遍历所有内容区块移除激活状态，导致此前激活的非第一个区块不会被隐藏
• 混淆了样式控制逻辑，既用类名控制显示隐藏，又额外设置了style.display行内样式，行内样式优先级高于类样式，导致类名切换不生效
• 误将内容区块的d-chart-show类添加到了Tab按钮元素上，属于类名绑定错误

解决方案 #

修正后的JS代码如下，无需修改原有CSS和HTML代码：

function activeTab(evt, id) {
    // 切换Tab按钮激活状态
    const activeTabBtn = document.querySelector(".TabButtonSelected");
    activeTabBtn.classList.remove("TabButtonSelected");
    evt.currentTarget.classList.add("TabButtonSelected");
    // 切换对应内容区块显示
    displaySection(id);
}
        
function displaySection(activeId) {
    // 所有内容区块全部设为隐藏
    const allSections = document.querySelectorAll(".tab-section");
    allSections.forEach(section => {
        section.classList.remove("d-chart-show");
        section.classList.add("d-chart-n");
    });
    // 目标内容区块设为显示
    const targetSection = document.getElementById("Section" + activeId);
    targetSection.classList.remove("d-chart-n");
    targetSection.classList.add("d-chart-show");
}

优化说明：使用classList方法代替字符串替换操作类名，避免出现类名拼接错误、空格遗漏等问题，逻辑更清晰易维护。

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