如何让子选项卡在单击父选项卡时默认打开

<div class="tabs">
  <div class="tab" onclick="openTab(event, 'tab1')">选项卡1</div>
  <div class="tab" onclick="openTab(event, 'tab2')">选项卡2</div>
  <div class="tab" onclick="openTab(event, 'tab3')">选项卡3</div>
</div>

<div id="tab1" class="tab-content">
  <!-- 选项卡1的内容 -->
</div>
<div id="tab2" class="tab-content">
  <!-- 选项卡2的内容 -->
</div>
<div id="tab3" class="tab-content">
  <!-- 选项卡3的内容 -->
</div>

.tab {
  cursor: pointer;
}

.tab-content {
  display: none;
}

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

// 默认打开第一个选项卡
document.getElementById('tab1').classList.add('active');

function openTab(event, tabId) {
  // 获取所有选项卡和选项卡内容元素
  var tabs = document.getElementsByClassName('tab');
  var tabContents = document.getElementsByClassName('tab-content');

  // 移除所有选项卡的active类
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].classList.remove('active');
  }

  // 隐藏所有选项卡内容
  for (var i = 0; i < tabContents.length; i++) {
    tabContents[i].classList.remove('active');
  }

  // 添加当前选项卡的active类
  event.currentTarget.classList.add('active');

  // 显示对应的选项卡内容
  document.getElementById(tabId).classList.add('active');
}