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

jsでタブ実装

<!DOCTYPE html>
<br><html lang="ja">
<br><head>
<br>    <meta charset="UTF-8">
<br>    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<br>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<br>    <title>Document</title>
<br>    <style>
<br>        .tab-wrap {
<br>            display: flex;
<br>            flex-wrap: wrap;
<br>        }
<br>        .tab-label {
<br>            color: White;
<br>            background: LightGray;
<br>            margin-right: 5px;
<br>            padding: 3px 12px;
<br>            order: -1;
<br>        }
<br>        .tab-content {
<br>            width: 100%;
<br>            display: none;
<br>            box-sizing: border-box;
<br>            border: solid 1px black;
<br>        }
<br>        /* アクティブなタブ */
<br>        .tab-switch:checked+.tab-label {
<br>            background: DeepSkyBlue;
<br>        }
<br>        .tab-switch:checked+.tab-label+.tab-content {
<br>            display: block;
<br>        }
<br>        /* ラジオボタン非表示 */
<br>        .tab-switch {
<br>            display: none;
<br>        }
<br>    </style>
<br></head>
<br><body>
<br>    <div class="tab-wrap">
<br>        <input id="TAB-01" type="radio" name="tab" class="tab-switch" checked="checked" />
<br>        <label class="tab-label" for="TAB-01">ボタン 1</label>
<br>        <div class="tab-content">
<br>            コンテンツ 1
<br>        </div>
<br>
<br>        <input id="TAB-02" type="radio" name="tab" class="tab-switch" />
<br>        <label class="tab-label" for="TAB-02">ボタン 2</label>
<br>        <div class="tab-content">
<br>            コンテンツ 2
<br>        </div>
<br>
<br>        <input id="TAB-03" type="radio" name="tab" class="tab-switch" />
<br>        <label class="tab-label" for="TAB-03">ボタン 3</label>
<br>        <div class="tab-content">
<br>            コンテンツ 3
<br>        </div>
<br>    </div>
<br></body>
<br></html>