HTML 和 CSS 单选标签问题

Question

好的，我为我的工作制作了一个网站。这只是为了他的 ebay 网站，因为 ebay 将不再支持 javascript。我制作了一组(七个)完全由 html 和 css 组成的选项卡。它们工作正常，但我遇到的问题是没有一个选项卡实际上是打开的，并在网页的初始打开时显示。他希望在网页打开时打开 tab-1 以显示元素信息，而无需用户手动打开它。这是我的 html 示例。

<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1">
<label for="tab-1"><span style="cursor:pointer" class=:"tab-switch">tab-1 name</span></label>

<div class="content">
<p>tab-1 info</p>
</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2"><span style="cursor:pointer">tab-2 name</span></label>

<div class="content">
<p>tab-2 info</p>
</div>
</div>

这是我用来创建单选标签的基本格式。我现在很好奇我可以做些什么来让 tab-1 默认打开。我假设可能是伪类或类似的东西。请记住，我避免以任何形式使用 javascript。

Answer 1

在您希望默认选中的输入上设置checked属性。

input:checked ~ .content {
  display: block;
}
.content, input {
  display: none;
}

<div class="tabs">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1"><span style="cursor:pointer" class=:"tab-switch">tab-1 name</span></label>

    <div class="content">
      <p>tab-1 info</p>
    </div>
  </div>

  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2"><span style="cursor:pointer">tab-2 name</span></label>

    <div class="content">
      <p>tab-2 info</p>
    </div>
  </div>