HTML和CSS无线标签问题

Question

好吧，我为我的工作做了一个网站。这只是为了他的易趣网站看到易趣将不再支持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

在input上设置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>