纯JavaScript实现高效双标签页切换与内容管理

<div class="floating-article">
    <ul class="tabs-wrapper">
        <!-- 标签1：初始为活动状态，点击时调用 changeActive('tab1') -->
        <li class="tab-active" id="tab1"><span onclick="changeActive('tab1')">Lorem</span></li>
        <!-- 标签2：初始为非活动状态，点击时调用 changeActive('tab2') -->
        <li id="tab2"><span onclick="changeActive('tab2')">Hello</span></li>
    </ul>
    <!-- 内容区域1：具有通用类 '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>
    <!-- 内容区域2：具有通用类 'tab'，初始隐藏 -->
    <div class="tab hide" id="tab2C">
        Hello world
    </div>
</div>

/* 激活状态的标签页样式 */
.tab-active {
  font-weight: bold; /* 字体加粗 */
  color: red;        /* 文本颜色设为红色 */
}

/* 隐藏内容的样式 */
.hide {
  display: none;     /* 将元素从文档流中移除，使其不可见 */
}

function changeActive(selection) {
  // 1. 获取所有标签页的列表项 (li)
  let tabsWrapper = document.querySelectorAll(".tabs-wrapper li");
  // 2. 获取所有内容区域 (div)，这些div都带有 'tab' 类
  let tabsContent = document.querySelectorAll(".tab"); 

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

  // 4. 重置所有内容区域的显示状态：为所有内容 div 添加 'hide' 类 (即全部隐藏)
  for(let i = 0; i < tabsContent.length; i++) {
    let tab = tabsContent[i];
    tab.classList.add("hide");
  }

  // 5. 根据传入的 'selection' 参数，激活对应的标签页并显示其内容
  switch(selection) {
      case 'tab1':
          // 获取 ID 为 'tab1C' 的内容区域
          let tab1c = document.querySelector('#tab1C');
          // 获取 ID 为 'tab1' 的标签页 li 元素
          let tab1 = document.querySelector('#tab1');

          // 为标签页添加 'tab-active' 类，使其变为激活状态
          tab1.classList.add("tab-active");
          // 移除内容区域的 'hide' 类，使其显示
          tab1c.classList.remove("hide");
          break;
      case 'tab2':
          // 获取 ID 为 'tab2C' 的内容区域
          let tab2c = document.querySelector('#tab2C');
          // 获取 ID 为 'tab2' 的标签页 li 元素
          let tab2 = document.querySelector('#tab2');

          // 为标签页添加 'tab-active' 类
          tab2.classList.add("tab-active");
          // 移除内容区域的 'hide' 类
          tab2c.classList.remove("hide");
          break;
      default:
          // 默认情况处理 (可选)
          break;
  }
}