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属性。

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>

HTML和CSS无线电标签问题

1 个答案: