しらべものドット宇宙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>