(Sample)
シンプルなタブ切り替え機能を提供するウェブページです。
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- ① -->
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>タブ切り替えの例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.tab {
overflow: hidden;
border-bottom: 1px solid #ccc;
}
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<h1>タブ切り替えのデモ</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">タブ 1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">タブ 2</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">タブ 3</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>タブ 1</h3>
<p>タブ 1 の内容</p>
</div>
<div id="Tab2" class="tabcontent">
<h3>タブ 2</h3>
<p>タブ 2 の内容</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>タブ 3</h3>
<p>タブ 3 の内容</p>
</div>
<script>
function openTab(evt, tabName) {
// 全てのタブコンテンツを取得し、非表示にする
const tabcontent = document.getElementsByClassName('tabcontent');
for (let i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none';
}
// 全てのタブリンクを取得し、activeクラスを削除
const tablinks = document.getElementsByClassName('tablinks');
for (let i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', '');
}
// 指定されたタブを表示し、activeクラスを追加
document.getElementById(tabName).style.display = 'block';
evt.currentTarget.className += ' active';
}
</script>
</body>
</html>このコードのポイントは以下の通りです。
JavaScriptのポイント
function openTab(evt, tabName):const tabcontent = document.getElementsByClassName('tabcontent');: 全てのタブコンテンツを取得します。for (let i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = 'none'; }: 全てのタブコンテンツを非表示にします。const tablinks = document.getElementsByClassName('tablinks');: 全てのタブリンクを取得します。for (let i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(' active', ''); }: 全てのタブリンクからactiveクラスを削除します。document.getElementById(tabName).style.display = 'block';: クリックされたタブのコンテンツを表示します。evt.currentTarget.className += ' active';: クリックされたタブリンクにactiveクラスを追加します。
その他のポイント
<button class="tablinks" onclick="openTab(event, 'Tab1')">タブ 1</button>: タブのボタン。クリック時にopenTab関数を呼び出し、対応するタブコンテンツを表示します。
以上。