しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

jsでタブ実装

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .tab-wrap {

            display: flex;

            flex-wrap: wrap;

        }

        .tab-label {

            color: White;

            background: LightGray;

            margin-right: 5px;

            padding: 3px 12px;

            order: -1;

        }

        .tab-content {

            width: 100%;

            display: none;

            box-sizing: border-box;

            border: solid 1px black;

        }

        /* アクティブなタブ */

        .tab-switch:checked+.tab-label {

            background: DeepSkyBlue;

        }

        .tab-switch:checked+.tab-label+.tab-content {

            display: block;

        }

        /* ラジオボタン非表示 */

        .tab-switch {

            display: none;

        }

    </style>

</head>

<body>

    <div class="tab-wrap">

        <input id="TAB-01" type="radio" name="tab" class="tab-switch" checked="checked" />

        <label class="tab-label" for="TAB-01">ボタン 1</label>

        <div class="tab-content">

            コンテンツ 1

        </div>



        <input id="TAB-02" type="radio" name="tab" class="tab-switch" />

        <label class="tab-label" for="TAB-02">ボタン 2</label>

        <div class="tab-content">

            コンテンツ 2

        </div>



        <input id="TAB-03" type="radio" name="tab" class="tab-switch" />

        <label class="tab-label" for="TAB-03">ボタン 3</label>

        <div class="tab-content">

            コンテンツ 3

        </div>

    </div>

</body>

</html>