実現したいこと
jsを使用せずに、cssだけの上下のタブが連動しているタブ切り替えを作りたい。
発生している問題・エラーメッセージ
cssだけでタブが上下連動しているタブ切り替えを作りたいのですが上手くいきません。
上下にタブを作って切り替えをすることはできたのですが、
上下の選択されているタブには色を付けることができません。
調べてもjsを使用した方法しか出てこないのですが、わかる方いらっしゃいますでしょうか？
該当のソースコード
<html> <div class="tab-container"> <input id="a" type="radio" name="tab-item" checked> <label class="tab-item" for="a">A</label> <input id="b" type="radio" name="tab-item"> <label class="tab-item" for="b">B</label> <div id="a-content" class="tab-content"> Aの内容です。 </div> <div id="b-content" class="tab-content"> Bの内容です。 </div> <div class="bottom_tab"> <label class="tab-item" for="a">A</label> <label class="tab-item" for="b">B</label> </div> </div>
<css> /* 全体を覆うdiv */ .tab-container { width: 500px; border: 1px solid #57ccbc; } /*タブ(label)のスタイル*/ .tab-item { width: 50%; height: 50px; line-height: 50px; background-color: lightgray; text-align: center; display: block; float: left; flex-wrap: nowrap; color: gray; text-align: center; transition: all 0.2s; font-weight: bold; } /* inputボタンは目には見えないところで働いてもらう */ input[name="tab-item"] { display: none; } /* タブで切り替えたいコンテンツの部分。ここはお好みで */ .tab-content { display: none; padding: 40px 0; overflow: hidden; clear: both; text-align: center; } /* 選択されているタブのコンテンツを表示させる */ #a:checked ~ #a-content, #b:checked ~ #b-content { display: block; } /* 選択されていることがわかるように、選択されているタブはスタイルを変える */ .tab-container input:checked + .tab-item { background-color: #57ccbc; color: #fff; }
0 コメント