前端选项卡与可折叠组件实现方案全解析

1. 选项卡效果实现原理与实战

选项卡(Tab)是前端开发中最常见的交互组件之一，它允许用户在同一区域内切换不同内容视图。从技术实现角度看，现代Web开发中主要有三种主流实现方案：

1.1 纯CSS实现方案

通过:target伪类选择器结合锚点实现无JS的选项卡效果。这种方案的优点是零依赖，适合简单场景：

html复制<div class="tab-container">
  <nav>
    <a href="#tab1">选项卡1</a>
    <a href="#tab2">选项卡2</a>
  </nav>
  <div id="tab1" class="tab-content">内容1</div>
  <div id="tab2" class="tab-content">内容2</div>
</div>

<style>
.tab-content {
  display: none;
}
.tab-content:target {
  display: block;
}
</style>

注意：此方案在页面刷新时会保持最后一个激活的选项卡状态，但无法实现平滑过渡动画。

1.2 JavaScript动态控制方案

通过classList API动态切换active类是最常用的实现方式：

javascript复制const tabs = document.querySelectorAll('.tab-button');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有active类
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.classList.remove('active'));
    
    // 添加当前active类
    tab.classList.add('active');
    const target = tab.dataset.targe