在继承的视图中将两个字段转换为选项卡

<div class="tab-container">
  <div class="tab-header">
    <div class="tab-title active">字段1</div>
    <div class="tab-title">字段2</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">
      <!-- 字段1的内容 -->
    </div>
    <div class="tab-pane">
      <!-- 字段2的内容 -->
    </div>
  </div>
</div>

.tab-container {
  /* 容器样式 */
}

.tab-header {
  /* 选项卡标题样式 */
}

.tab-title {
  /* 单个选项卡标题样式 */
}

.tab-content {
  /* 选项卡内容样式 */
}

.tab-pane {
  /* 单个选项卡内容样式 */
}

// 获取选项卡标题和内容的DOM元素
const tabTitles = document.querySelectorAll('.tab-title');
const tabPanes = document.querySelectorAll('.tab-pane');

// 为每个选项卡标题添加点击事件监听器
tabTitles.forEach((title, index) => {
  title.addEventListener('click', () => {
    // 移除所有选项卡标题和内容的active类
    tabTitles.forEach((t) => t.classList.remove('active'));
    tabPanes.forEach((pane) => pane.classList.remove('active'));

    // 添加当前选项卡标题和内容的active类
    title.classList.add('active');
    tabPanes[index].classList.add('active');
  });
});