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

在前端开发中，可以通过使用JavaScript和CSS来实现子选项卡在单击父选项卡时默认打开的效果。下面是一种实现方式：

HTML结构：

<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>

CSS样式：

.tab {
  cursor: pointer;
}

.tab-content {
  display: none;
}

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

JavaScript代码：

// 默认打开第一个选项卡
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');
}

这段代码实现了一个简单的选项卡功能。通过点击父选项卡，对应的子选项卡内容会显示出来。默认情况下，第一个选项卡的内容会在页面加载时显示出来。

推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云云数据库MySQL版（CDB），腾讯云云原生容器服务（TKE）。

腾讯云产品介绍链接地址：