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>