【HTML,CSS,JavaScript】簡単なタブを作成する方法
ここでは、シンプルなタブを作成する方法を解説します。
タブの作成は、既にWebサイトを準備していれば5分程度で終わるかと思います。
こういった方へ向けた記事です ①タブを追加する方法を知りたい ②タブを追加する方法の一例を知りたい ③タブを初めて作成しようとしている
目次 １．タブ完成イメージ ２．タブ作成方法
１．タブ完成イメージ
２．タブ作成方法
下記を参考にしてください。大事な箇所は赤い文字にしてあります。（※スマホだと赤くなっていないかもしれませんのでPC推奨）
HTML（ndex.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="tab1">タブ1</a></li> <li><a href="#" data-id="tab2">タブ2</a></li> <li><a href="#" data-id="tab3">タブ3</a></li> </ul> <section class="content active" id="tab1"> カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。カシムラはフリーランス。 </section> <section class="content" id="tab2"> カシムラはプログラマ。カシムラはプログラマ。カシムラはプログラマ。 </section> <section class="content" id="tab3"> カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。カシムラはエンジニア。 </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;
}
/* クリックしたタブを紐付くcontentの背景色 */
.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;
}
JavaScript（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');
});
});
}
誰かの参考になれば幸いです。
