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>