/*ラジオボタン消す*/ input[name="tab"] { display: none; } /*コンテンツを非表示*/ .content { display: none; } /*「間接セレクタ」を使って選択されてるタブに紐づくコンテンツを表示*/ #id01:checked ~ #id01_content, #id02:checked ~ #id02_content, #id03:checked ~ #id03_content { display: block; } /*選択されてるタブに色付け*/ .tabs_contents input:checked + label { background-color: #000; color: #fff; }
「タブ01」と紐づいているよ
「タブ02」と紐づいているよ
「タブ03」と紐づいているよ
【html,css】cssだけを使ってタブで表示切り替えを実装する方法
2019/02/27