Loading [MathJax]/extensions/tex2jax.js

Vueは友達
ホーム
>
JavaScript jQuery
>
タブのクリックで中身の切り替えをJavaScriptで実装する方法

タブのクリックで中身の切り替えをJavaScriptで実装する方法

タブのクリックで中身の切り替えをJavaScriptで実装する方法

1904 回閲覧されました

みなさんこんにちは、WEB制作のエンジニアのjonioです。

今回はタブをクリックした時に中身を切り替えるのをJavaScriptで実装します。

なるべく理解して実装してほしいですがコピペしても実装することは可能です。

それでは説明します。

 

 

デモ

デモはここから見る事ができます。

 

 

考え方とコード

HTMLとCSSは↓です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>タブの切り替え</title>
</head>
<body>
<div class="container">
<ul class="tab-list">
<li class="tab-item active">タブ1</li>
<li class="tab-item">タブ2</li>
<li class="tab-item">タブ3</li>
</ul>
<div class="tab-container">
<div class="tab-content active">タブ1の内容タブ1の内容タブ1の内容</div>
<div class="tab-content">タブ2の内容タブ2の内容タブ2の内容</div>
<div class="tab-content">タブ3の内容タブ3の内容タブ3の内容</div>
</div>
</div>
<script type="text/javascript" src="js/common.js"></script>
</body>
</html>
view raw HTML hosted with ❤ by GitHub

/* ここからreset.css */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
nav ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
p, .nav {
margin: 0;
}
/* reset.cssはここまで */
.container {
width: 600px;
margin: 0 auto;
padding: 30px;
}
.tab-list {
display: flex;
}
.tab-item{
width: 100px;
border: 1px solid #000;
border-left: none;
border-bottom: none;
font-size: 20px;
text-align: center;
padding: 10px;
color: #000;
transition: 0.2s ease;
cursor: pointer;
list-style:none;
}
.tab-list li:first-child {
border-left: 1px solid #000;
}
.tab-list li:hover {
background: #000;
color: #fff;
}
.tab-list li.active {
background: #000;
color: #fff;
}
.tab-container {
border: 1px solid #000;
padding: 20px;
height: 300px;
}
.tab-content {
display: none;
}
.tab-content.active{
display: block;
}
.active{
display: block;
}
view raw css hosted with ❤ by GitHub

今回の内容はサイトを作る時に実装するのを想定していますがサイトを作る時は必ずreset.cssを入れるのでCSSには私がいつも使うreset.cssを入れています。

私と同じreset.cssを使う必要はないので自分が使うreset.cssを入れてください。

これで↓になります。

タブ2・タブ3をクリックすると中身が切り替わりタブの背景色が黒色になり文字が白色になるのを実装しますがJavaScriptを使います。

まずはタブを表示するクラス（.tab-list）とタブの中身を表示するクラス（.tab-content）を取得するためにコードを↓にします。

const tabItem = document.querySelectorAll(".tab-item");
const tabContent = document.querySelectorAll(".tab-content");
view raw JavaScript hosted with ❤ by GitHub

タブをクリックした時にタブの文字と背景色が変わってタブの中身の表示が切り替わるのはこう考えます。

タブをクリックした時に一旦全てのタブの背景色を無しにして文字の色を黒にして全てのタブの中身を非表示にする。

そして該当のタブだけ背景色を黒にして文字の色を白にして該当のタブの中身を表示する。

全てのタブの背景色を無しにして文字の色を黒にしてクリックしたタブの背景色にする・全てのタブの中身を非表示にしてクリックしたタブの中身を表示するのを関数にします。

コードを↓にします。

const tabItem = document.querySelectorAll(".tab-item");
const tabContent = document.querySelectorAll(".tab-content");
function tabToggle () {
for (let i = 0; i < tabItem.length; i++) {
tabItem[i].classList.remove("active");
}
for (let i = 0; i < tabContent.length; i++) {
tabContent[i].classList.remove("active");
}
const aryTabs = Array.prototype.slice.call(tabItem);
const index = aryTabs.indexOf(this);
tabItem[index].classList.add("active");
tabContent[index].classList.add("active");
}
view raw javascript hosted with ❤ by GitHub

全てのタブの背景色をなしにして文字の色を黒くしたり全ての中身を非表示にするのは「for文」を使います。

タブについては9行目〜11行目でタブの中身については13行目〜15行目です。

最初の状態でタブ1の背景色が黒で文字の色が白になっていてタブ1の中身が表示されるのですがcssの117行目〜119行目で行っています。

他のタブをクリックした時にタブ1の背景色・文字の色とタブの中身が変化するのはJavaScriptの9行目〜11行目・13行目〜15行目です。

15行目の「Array.prototype.slice.call(  )」ですが「(  )の中身を使って配列を作る」という意味です。

「Array.prototype.slice.call(  )」はこの記事に詳しい解説があります。（↓の画像の下辺りに解説があります）

17行目に「this」がありJavaScriptの「this」は状況で意味が変わってくるのですが今回の場合は「クリックしたタブ（HTMLのtab-item）」のことです。

「this」についてはこの記事に詳しい解説があります。（↓の画像の辺りに詳しい説明があります）

クリックしたタブの背景色と文字の色を変化させるのが19行目でタブの中身の表示の切り替えが21行目です。

最後にタブをクリックした時に「tabToggle」関数を実行します。

コードを↓にします。

const tabItem = document.querySelectorAll(".tab-item");
const tabContent = document.querySelectorAll(".tab-content");
function tabToggle () {
for (let i = 0; i < tabItem.length; i++) {
tabItem[i].classList.remove("active");
}
for (let i = 0; i < tabContent.length; i++) {
tabContent[i].classList.remove("active");
}
const aryTabs = Array.prototype.slice.call(tabItem);
const index = aryTabs.indexOf(this);
tabItem[index].classList.add("active");
tabContent[index].classList.add("active");
}
//ここから追加
for (let i = 0; i < tabItem.length; i++) {
tabItem[i].addEventListener("click", tabToggle);
}
//ここまで追加
view raw JavaScript hosted with ❤ by GitHub

tabToggle関数を実行するのは26行目〜28行目ですが全てのタブをクリックした時を考えるので「for文」を使います。

これで完成です。