JavaScriptでタブでページを切り替える方法
タブでページを切り替える方法です。
自力で作ることができたのでメモとして残しておきます。
JavaScriptを使っています。
ただしjQueryは使っていません。
作りたいもの
作りたいのは次のようなページです。
タブを押すとそのページが表示されます。
コード
HTMLとJavaScriptです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タブ</title>
<style>
.menu {
display: flex;
margin-bottom: 15px;
cursor: pointer;
}
.tab {
border: solid 1px silver;
border-bottom: solid 1px black;
background-color: #eeeeee;
padding: 5px 15px;
}
.selected {
border: solid 1px black;
border-bottom: none;
background-color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="tab">ねずみ</div>
<div class="tab">うし</div>
<div class="tab">とら</div>
<div class="tab">うさぎ</div>
</div>
<div class="content">
<h2>ねずみ</h2>
</div>
<div class="content">
<h2>うし</h2>
</div>
<div class="content">
<h2>とら</h2>
</div>
<div class="content">
<h2>うさぎ</h2>
</div>
<script>
show_tab(0);
show_content(0);
tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.onclick = function() {
tab_index = [].slice.call(tabs).indexOf(tab);
show_tab(tab_index);
show_content(tab_index);
}
});
function show_tab(tab_index) {
tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.classList.remove("selected");
});
tabs[tab_index].classList.add("selected");
}
function show_content(tab_index) {
divs = document.querySelectorAll(".content");
divs.forEach(function(div) {
div.style.display = "none";
});
divs[tab_index].style.display = "block";
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タブ</title>
<style>
.menu {
display: flex;
margin-bottom: 15px;
cursor: pointer;
}
.tab {
border: solid 1px silver;
border-bottom: solid 1px black;
background-color: #eeeeee;
padding: 5px 15px;
}
.selected {
border: solid 1px black;
border-bottom: none;
background-color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="tab">ねずみ</div>
<div class="tab">うし</div>
<div class="tab">とら</div>
<div class="tab">うさぎ</div>
</div>
<div class="content">
<h2>ねずみ</h2>
</div>
<div class="content">
<h2>うし</h2>
</div>
<div class="content">
<h2>とら</h2>
</div>
<div class="content">
<h2>うさぎ</h2>
</div>
<script>
show_tab(0);
show_content(0);
tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.onclick = function() {
tab_index = [].slice.call(tabs).indexOf(tab);
show_tab(tab_index);
show_content(tab_index);
}
});
function show_tab(tab_index) {
tabs = document.querySelectorAll(".tab");
tabs.forEach(function(tab) {
tab.classList.remove("selected");
});
tabs[tab_index].classList.add("selected");
}
function show_content(tab_index) {
divs = document.querySelectorAll(".content");
divs.forEach(function(div) {
div.style.display = "none";
});
divs[tab_index].style.display = "block";
}
</script>
</body>
</html>
[ 2024年1月9日 | カテゴリー: デジタル | タグ: HTML , JavaScript ]
« 松屋の株主優待券が使える最も高いメニュー | MAMPで反映が遅いときに試した方法 »
コメントを残す