如何在HTML中实现可切换信息的方块？技术实现求助

这个组件叫做垂直选项卡（Vertical Tabs），也可称为侧边栏联动选项卡组件，核心特性是左侧选项触发右侧内容切换，同时保持选中项与内容区的视觉样式联动。

• 搜索关键词：「垂直选项卡 背景色同步」「侧边栏选项内容切换」，可直接定位同类实现案例
• 参考Bootstrap、Tailwind UI等成熟UI框架的垂直选项卡组件，学习其布局结构与交互逻辑
• 研究CSS变量结合JavaScript的样式联动方案，这是实现背景色同步的高效方式

HTML属性 #

• 用<ul>+<li>构建左侧选项列表，每个选项添加data-target属性，值对应右侧内容区块的ID，用于关联切换目标
• 给内容区块设置唯一id，方便通过JavaScript定位
• 可选添加tabindex="0"让选项支持键盘回车触发，优化无障碍访问体验

CSS样式 #

• 使用display: flex实现容器的左右分栏布局
• 定义CSS变量（如--active-bg）统一管理选中状态的背景色，实现选项和内容区的样式同步
• 给选中选项添加.active类，设置背景色、字体加粗等高亮样式
• 默认隐藏未选中的内容区，通过.active类控制显示状态
• 给选项添加cursor: pointer和hover样式，提升交互反馈

需要。JavaScript负责处理点击交互，完成以下核心逻辑：

1. 监听左侧选项的点击动作
2. 移除所有选项的.active类，给当前点击的选项添加该类
3. 隐藏所有内容区，显示当前选项对应的内容区块
4. 同步更新选中项和内容区的背景色（也可通过CSS变量自动同步）

<div class="vertical-tabs-container">
  <!-- 左侧选项列表 -->
  <ul class="tabs-list">
    <li class="tab-item active" data-target="content-1">选项1</li>
    <li class="tab-item" data-target="content-2">选项2</li>
    <li class="tab-item" data-target="content-3">选项3</li>
  </ul>
  <!-- 右侧内容区 -->
  <div class="tabs-content">
    <div class="content-item active" id="content-1">
      <h3>选项1内容</h3>
      <p>这是选项1对应的详细信息，背景色和左侧选中项一致</p>
    </div>
    <div class="content-item" id="content-2">
      <h3>选项2内容</h3>
      <p>这是选项2对应的详细信息，切换后背景色会同步更新</p>
    </div>
    <div class="content-item" id="content-3">
      <h3>选项3内容</h3>
      <p>这是选项3对应的详细信息，选中后背景色和左侧选项统一</p>
    </div>
  </div>
</div>

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.vertical-tabs-container {
  width: 800px;
  height: 400px;
  margin: 50px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
}

.tabs-list {
  width: 200px;
  list-style: none;
  background-color: #f5f5f5;
}

.tab-item {
  padding: 16px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  /* 定义选中状态的背景色变量 */
  --active-bg: #e0f7fa;
}

.tab-item.active {
  background-color: var(--active-bg);
  font-weight: bold;
  border-right: 2px solid #00acc1;
}

.tab-item:hover {
  background-color: #e8e8e8;
}

.tabs-content {
  flex: 1;
  padding: 24px;
  background-color: #fff;
}

.content-item {
  display: none;
  /* 同步选中状态的背景色 */
  background-color: var(--active-bg);
  padding: 20px;
  border-radius: 6px;
  height: 100%;
}

.content-item.active {
  display: block;
}

// 获取所有选项和内容区块
const tabItems = document.querySelectorAll('.tab-item');
const contentItems = document.querySelectorAll('.content-item');

tabItems.forEach(tab => {
  tab.addEventListener('click', () => {
    // 移除所有选项的active类
    tabItems.forEach(item => item.classList.remove('active'));
    // 给当前点击的选项添加active类
    tab.classList.add('active');
    
    // 获取目标内容ID并切换显示
    const targetId = tab.getAttribute('data-target');
    contentItems.forEach(item => item.classList.remove('active'));
    document.getElementById(targetId).classList.add('active');
  });
});

// 可选：支持键盘回车触发切换
tabItems.forEach(tab => {
  tab.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      tab.click();
    }
  });
});

内容的提问来源于stack exchange，提问作者Leena A