在一个页面中设置2组选项卡，默认选项卡为"checked“

在一个页面中设置2组选项卡，默认选项卡为"checked"。

选项卡是一种常见的用户界面元素，用于在不同的内容之间进行切换。在一个页面中设置2组选项卡，可以通过HTML和CSS来实现。

首先，我们可以使用HTML的<input>元素和<label>元素来创建选项卡的结构。每个选项卡都需要一个唯一的ID和一个关联的标签。

<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">选项卡1</label>

<input type="radio" id="tab2" name="tabs">
<label for="tab2">选项卡2</label>

上述代码中，我们创建了两个选项卡，分别使用了ID为tab1和tab2，并且将第一个选项卡设置为默认选中状态（通过checked属性）。

接下来，我们可以使用CSS来美化选项卡的样式，并实现选项卡之间的切换效果。

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ccc;
  cursor: pointer;
}

input[type="radio"]:checked + label {
  background-color: #f00;
  color: #fff;
}

上述代码中，我们将<input>元素的display属性设置为none，以隐藏实际的单选按钮。然后，我们使用<label>元素来创建选项卡的样式，并设置了选中状态下的背景颜色和文字颜色。

最后，我们可以在选项卡下方添加对应的内容区域，以展示不同选项卡的内容。

<div id="content1">
  <!-- 选项卡1的内容 -->
</div>

<div id="content2">
  <!-- 选项卡2的内容 -->
</div>

通过CSS，我们可以控制内容区域的显示和隐藏，使其与选项卡对应。

#content1, #content2 {
  display: none;
}

input[type="radio"]:checked + label + #content1 {
  display: block;
}

input[type="radio"]:checked + label + #content2 {
  display: block;
}

上述代码中，我们将内容区域的display属性设置为none，以隐藏内容。然后，通过选择器选择选中状态下的选项卡和对应的内容区域，将其display属性设置为block，以显示内容。

至此，我们完成了在一个页面中设置2组选项卡，并将默认选项卡设置为"checked"的任务。根据实际需求，可以根据上述代码进行扩展和修改。

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