JavaScript双标签页切换：状态管理与内容显示优化实践

<div class="floating-article">
    <ul class="tabs-wrapper">
        <!-- 标签项，通过span包裹并绑定onclick事件，传递标签ID -->
        <li id="tab1"><span onclick="changeActive('tab1')">Lorem</span></li>
        <li id="tab2"><span onclick="changeActive('tab2')">Hello</span></li>
    </ul>
    <!-- 标签内容区域，添加统一的 'tab' 类 -->
    <div class="tab" 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 class="tab hide" id="tab2C">
        Hello world
    </div>
</div>

.tab-active {
  font-weight: bold; /* 字体加粗 */
  color: red;        /* 文本颜色为红色 */
}

.hide {
  display: none;     /* 隐藏元素 */
}

function changeActive(selection) {
  // 1. 获取所有标签页的列表项和所有内容区域
  let tabsWrapper = document.querySelectorAll(".tabs-wrapper li");
  let tabContents = document.querySelectorAll(".tab"); // 使用公共类 .tab 获取所有内容区域

  // 2. 重置所有标签页的状态：移除所有标签项的 'tab-active' 类
  for (let i = 0; i < tabsWrapper.length; i++) {
    let li = tabsWrapper[i];
    li.classList.remove("tab-active");
  }

  // 3. 隐藏所有标签页内容：为所有内容区域添加 'hide' 类
  for (let i = 0; i < tabContents.length; i++) {
    let tabContent = tabContents[i];
    tabContent.classList.add("hide");
  }

  // 4. 根据传入的 selection 参数，激活对应标签并显示其内容
  switch (selection) {
    case 'tab1':
      let tab1c = document.querySelector('#tab1C'); // 获取 tab1 对应的内容区域
      let tab1 = document.querySelector('#tab1');   // 获取 tab1 标签项
      tab1.classList.add("tab-active");         // 激活 tab1 标签项
      tab1c.classList.remove("hide");           // 显示 tab1 的内容
      break;
    case 'tab2':
      let tab2c = document.querySelector('#tab2C'); // 获取 tab2 对应的内容区域
      let tab2 = document.querySelector('#tab2');   // 获取 tab2 标签项
      tab2.classList.add("tab-active");         // 激活 tab2 标签项
      tab2c.classList.remove("hide");           // 显示 tab2 的内容
      break;
    default:
      // 默认情况或错误处理，例如可以设置一个默认活跃标签
      break;
  }
}

// 页面加载完成后，设置初始活跃标签（可选，如果HTML中已设置则无需）
// 例如，默认激活 tab1
document.addEventListener('DOMContentLoaded', () => {
    changeActive('tab1');
});