HTMLとCSSのラジオタブの発行

Question

大丈夫、私は私の仕事のためのウェブサイトを作った。 eBayがもうJavaScriptをサポートしなくなるので、彼のeBayサイトを見ているだけです。私はhtmlとcssで完全に構成された（7つの）タブのセットを作った。彼らはうまく動作しますが、問題は、実際に開いていると、Webページの最初の開口部に表示されているタブのどれもありません。ユーザーが手動で開く必要なく、アイテム情報を表示するためにWebページが開いたときに、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> 

これは私がラジオタブを作成した基本的なフォーマットです。私はタブー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>