CSSの目標トグル - 初期設定可視

Question

にIは表示と非表示にして所望のようにこの動作

#toggle1 { 
 
    display: none; 
 
} 
 

 
#toggle1:target { 
 
    display: block; 
 
} 
 

 
#toggle2 { 
 
    display: none; 
 
} 
 

 
#toggle2:target { 
 
    display: block; 
 
}

<a href="#toggle1">Show1</a><br /> 
 
<a href="#toggle2">Show2</a> 
 
<p id="toggle1">1</p> 
 
<p id="toggle2">2</p>

を設定する単純なHTML/CSSのトグルを有します。しかし、最初の段落がページの読み込み時に見えるようにしたい。 #toggle1 {display: none;}が削除された場合、正常に動作しません。

ご協力いただけると助かります。

ありがとうございます。

Answer 1

あなたは、隠し要素の順序を逆に一つの「デフォルト」にdisplay:blockを追加し:target ~ #toggle1にdisplay:noneを追加する場合、これはハックの少しだけですが、それがデフォルトで選択されたアイテムをシミュレート：

を

#toggle1, #toggle1:target, #toggle2:target { 
 
    display: block; 
 
} 
 
:target ~ #toggle1, #toggle2 { 
 
    display: none; 
 
}

<a href="#toggle1">Show1</a><br /> 
 
<a href="#toggle2">Show2</a> 
 
<p id="toggle2">2</p> 
 
<p id="toggle1">1</p>