双Tab切换优化及内容显示异常修复求助（纯JavaScript）

问题原因 #

1. 内容显示异常：原代码仅处理了隐藏非当前Tab对应的内容，未显式设置当前Tab内容为display:block。首次点击时默认显示的内容还处于可见状态，所以表现正常；但切换过一次后，之前的内容被隐藏，再次点击时只隐藏另一个内容，当前内容仍处于隐藏状态，最终导致两个内容都变为none。
2. 代码冗余：针对固定的双Tab场景，原代码用循环遍历Tab完全没必要，可直接操作两个Tab元素简化逻辑。

优化后的实现代码 #

HTML（仅修正初始内容显示状态） #

<div class="floating-article">
    <ul class="tabs-wrapper">
        <li class="tab-active" id="tab1">Lorem</li>
        <li class="tab-inactive" id="tab2">Hello</li>
    </ul>
    <div id="tab1C">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure fuga rem eos facere perferendis ut molestias. Vitae consectetur, fugiat blanditiis illum recusandae excepturi officiis nihil. Similique dolores in illum?
    </div>
    <div id="tab2C" style="display:none;">
        Hello world
    </div>
</div>

注：给默认非激活的Tab内容tab2C加上style="display:none;"，保证初始状态与Tab激活状态匹配。

JavaScript（无循环，纯JS实现） #

// 获取Tab和对应的内容元素
const tab1 = document.getElementById('tab1');
const tab2 = document.getElementById('tab2');
const tab1Content = document.getElementById('tab1C');
const tab2Content = document.getElementById('tab2C');

// Tab1点击事件处理
tab1.addEventListener('click', () => {
    // 更新Tab激活状态
    tab1.classList.replace('tab-inactive', 'tab-active');
    tab2.classList.replace('tab-active', 'tab-inactive');
    // 切换内容显示
    tab1Content.style.display = 'block';
    tab2Content.style.display = 'none';
});

// Tab2点击事件处理
tab2.addEventListener('click', () => {
    // 更新Tab激活状态
    tab2.classList.replace('tab-inactive', 'tab-active');
    tab1.classList.replace('tab-active', 'tab-inactive');
    // 切换内容显示
    tab2Content.style.display = 'block';
    tab1Content.style.display = 'none';
});

代码说明 #

• 初始状态对齐：让非激活Tab的内容默认隐藏，符合页面初始逻辑。
• 无冗余遍历：直接针对两个Tab元素绑定事件，逻辑简洁直观。
• 状态完全同步：每次点击时同时处理Tab的激活类名和对应内容的显示状态，确保两者状态完全匹配，避免出现内容显示异常。

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