CSSで切り替えタブを作る
date:2018/2/25
【img：】CSSでタブ切り替えを実現する
イメージ的には、メニューボタンがあり画面内でボタンに応じたデータの内容を表示します。どのように実現しているかというと、radioボタン（実際のボタンは非常でラベルの属性で切り替え）で指定されたコンテンツを表示します。コンテンツの内容はradioボタンのcheckedされたコンテンツのみをblock属性にすることで、他のdiv内容を表示しないようにします。
サンプルコードです。
<div class="css_tab">
<input id="menu1" type="radio" name="tab_item" checked>
<label class="tab_item" for="menu1">メニュー１</label>
<input id="menu2" type="radio" name="tab_item">
<label class="tab_item" for="menu2">メニュー２</label>
<input id="menu3" type="radio" name="tab_item">
<label class="tab_item" for="menu3">メニュー３</label>
<div class="tab_content" id="menu1_content">
<div class="contents">
メニュー１の内容です
</div>
</div>
<div class="tab_content" id="menu2_content">
<div class="contents">
メニュー２の内容です
</div>
</div>
<div class="tab_content" id="menu3_content">
<div class="contents">
メニュー３の内容です
</div>
</div>
</div>
