index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Tab Menu</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#" class="active" data-id="about">サイトの概要</a></li>
<li><a href="#" data-id="service">サービス内容</a></li>
<li><a href="#" data-id="contact">お問い合わせ</a></li>
</ul>
<section class="content active" id="about">
サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
</section>
<section class="content" id="service">
サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
</section>
<section class="content" id="contact">
お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>css/styles.css
body {
font-size: 14px;
}
.container {
margin: 30px auto;
width: 500px;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li a {
display: inline-block;
width: 100px;
text-align: center;
padding: 8px 0;
color: #333;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.menu li a.active {
background: #333;
color: #fff;
}
.menu li a:not(.active):hover {
opacity: 0.5;
transition: opacity 0.4s;
}
.content.active {
background: #333;
color: #fff;
min-height: 150px;
padding: 12px;
display: block;
}
.content {
display: none;
}js/main.js
'use strict';
{
const menuItems = document.querySelectorAll('.menu li a');
const contents = document.querySelectorAll('.content');
menuItems.forEach(clickedItem => {
clickedItem.addEventListener('click', e => {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
clickedItem.classList.add('active');
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(clickedItem.dataset.id).classList.add('active');
});
});
}