cssのみでタブ実装
inputタグのtype="radio"
擬似クラスの:checkedを用いて選択によって、内容が変わるタブを実装しようと思っています。
発生している問題・エラーメッセージ
タブ下のコンテンツがinputタグと同じクラス内に無いと機能しない。
表示するコンテンツをinputタグを囲うクラスと別のクラスで囲いたい。
該当のソースコード
####想定通り動くhtml
html
1 .tab 2 input.check#likes checked="checked" name="tab_item" type="radio" 3 label.tab_item for= "contents" 選択1 4 input.check#question name="tab_item" type= "radio" 5 label.tab_item for= "question" 選択2 6 .tab-contents 7 p.tab-content#likes_content 8 | hoge 9 p.tab-content#question_content 10 | fuga 11
####想定通り動かないhtml
html
1 .tab 2 input.check#likes checked="checked" name="tab_item" type="radio" 3 label.tab_item for= "contents" 選択1 4 input.check#question name="tab_item" type= "radio" 5 label.tab_item for= "question" 選択2 6 p.tab-content#likes_content 7 | hoge 8 p.tab-content#question_content 9 | fuga
css
1 .tab { 2 width: auto; 3 height: 40px; 4 margin-top: 10px; 5 padding: 0 10%; 6 background-color: white; 7 box-sizing: border-box; 8 display: flex; 9 }; 10 .tab-contents { 11 width: auto; 12 margin-top: 10px; 13 height: 100px; 14 background-color: white; 15 }; 16 17 .tab-content { 18 display: none; 19 }; 20 21 #likes:checked ~ #likes_content, 22 #question:checked ~ #question_content { 23 display: block; 24 };
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。