纯代码自定义TAB页 Q

纯代码自定义TAB页通常指的是不依赖于第三方库，而是完全使用原生HTML、CSS和JavaScript来创建可切换内容的标签页界面。这种方式提供了更大的灵活性和控制能力，允许开发者根据具体需求来设计和实现用户界面。以下是创建自定义TAB页的基本步骤：

1. HTML结构：首先需要定义一个容器，用于放置所有的TAB按钮和对应的内容区块。通常，TAB按钮用`<button>`或`<a>`标签来表示，而内容区块则用`<div>`或其他标签来包裹。

<div id="tabs">
  <div class="tab-buttons">
    <button class="tab-link" onclick="openTab(event, 'tab1')">Tab 1</button>
    <button class="tab-link" onclick="openTab(event, 'tab2')">Tab 2</button>
    <!-- 更多的TAB按钮 -->
  </div>
  <div id="tab1" class="tab-content" style="display: block;">
    <!-- Tab 1的内容 -->
  </div>
  <div id="tab2" class="tab-content">
    <!-- Tab 2的内容 -->
  </div>
  <!-- 更多的TAB内容区块 -->
</div>

2. CSS样式：接着为TAB页定义样式，包括布局、颜色、字体等，确保界面美观且功能正确。

/* 样式示例 */
#tabs {
  /* 容器样式 */
}
.tab-buttons {
  /* TAB按钮样式 */
}
.tab-content {
  /* 内容区块样式 */
  display: none;
}
.tab-content.active {
  display: block;
}

3. JavaScript逻辑：最后，编写JavaScript代码来控制TAB页的切换逻辑。这包括初始化显示第一个TAB的内容，以及绑定点击事件来切换显示的内容区块。

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  // 获取所有的内容区块和TAB按钮
  tabcontent = document.getElementsByClassName("tab-content");
  tablinks = document.getElementsByClassName("tab-link");
  // 隐藏所有的内容区块
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // 移除所有TAB按钮的激活状态
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 显示被点击的TAB对应的内容区块
  document.getElementById(tabName).style.display = "block";
  // 添加激活状态到被点击的TAB按钮
  evt.currentTarget.className += " active";
}

// 初始化：显示第一个TAB的内容
document.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector('.tab-buttons button:first-child').click();
});

通过上述步骤，可以实现一个基本的自定义TAB页。进一步的增强可以通过添加动画效果、键盘支持和可访问性改善等来实现。