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">メニュー１</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>