ROROのWEB技術・子育て・ガジェット通信

本WEBページは2児の息子を持つROROの子育てに伴うメリット・デメリットを丸裸にしていきます。例えば旅行であったり家系であったり、どんな生活をしているのかをお楽しみください。また子育ての便利グッズの紹介、ROROの趣味であるガジェットやゲーム情報や勉強なども紹介します。色んなコンテンツをお楽しみくださいね!

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">メニュー1</label>
<input id="menu2" type="radio" name="tab_item">
<label class="tab_item" for="menu2">メニュー2</label>
<input id="menu3" type="radio" name="tab_item">
<label class="tab_item" for="menu3">メニュー3</label>

<div class="tab_content" id="menu1_content">
<div class="contents">
メニュー1の内容です
</div>
</div>

<div class="tab_content" id="menu2_content">
<div class="contents">
メニュー2の内容です
</div>
</div>

<div class="tab_content" id="menu3_content">
<div class="contents">
メニュー3の内容です
</div>
</div>
</div>