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>