JavaScriptでタブで切り替えるコンテンツを作る方法
JavaScriptでタブで切り替えるコンテンツを作る方法を備忘録も兼ねて簡単にまとめました。
WEBサイトなどで結構よく使われているかと思いますので参考にして頂けると嬉しいです。
簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！
目次
- JavaScriptでタブで切り替えるコンテンツを作るには？
- HTMLを記述していこう
- CSSで装飾してタブやコンテンツ部分の見た目を作ろう
- JavaScriptを記述してタブでコンテンツを切り替えられる処理を追加しよう
- まとめ
JavaScriptでタブで切り替えるコンテンツを作るには？
まずは土台となるHTMLを記述していきます。
その後、土台（HTML）を記述できたらその土台をもとにCSSを記述してタブやコンテンツの装飾を指定し、JavaScriptでコンテンツ切り替え用のタブがクリックされた時の動作（処理）を記述していきます。
HTMLを記述していこう
下記のように土台となるHTMLを記述します。
class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！
ただ、class名js-switchingTabやjs-switchingContentは最初に「js」と書かれている通り、後から「JavaScript」で使用するのでこちらで変更した際は「JavaScript」側のclass名も同じ箇所を変更するようご注意ください。
classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭に「js-」のような感じのclass名をつけた方がいいかと思います！
<div class="switching">
<ul class="switching__tabBox">
<li class="switching__tab js-switchingTab is-active">
<p class="switching__tabText">Tab-A</p>
</li>
<li class="switching__tab js-switchingTab">
<p class="switching__tabText">Tab-B</p>
</li>
<li class="switching__tab js-switchingTab">
<p class="switching__tabText">Tab-C</p>
</li>
</ul><!-- /.switching__tabBox -->
<div class="switching__contentBox">
<div class="switching__content js-switchingContent is-active">
<div class="switching__contentInner">
<p class="switching__contentText">Content-A</p>
</div>
</div>
<div class="switching__content js-switchingContent">
<div class="switching__contentInner">
<p class="switching__contentText">Content-B</p>
</div>
</div>
<div class="switching__content js-switchingContent">
<div class="switching__contentInner">
<p class="switching__contentText">Content-C</p>
</div>
</div>
</div><!-- /.switching__contentBox -->
</div><!-- /.switching -->※最初に表示させたいタブとコンテンツの要素（同じ順番目の要素）に「is-active」classを記述しておきましょう
CSSで装飾してタブやコンテンツ部分の見た目を作ろう
土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、タブやコンテンツ部分のデザインを形作っていきます。
装飾が正常にできたらデモページのようなタブとコンテンツ（背景色がるくらい）のデザインになります。
/*--------------------
switching
--------------------*/
.switching__tabBox {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.switching__tab {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
width: 33.33%;
min-height: 50px;
color: #000000;
list-style: none;
background-color: #cccccc;
border-right: 1px solid #202f55;
box-sizing: border-box;
cursor: pointer;
}
.switching__tab:last-child {
border-right: none;
}
.switching__tabText {
display: inline-block;
font-size: 20px;
text-align: center;
}
.switching__contentBox {
height: calc(100vh - 50px);
background-color: rgba(32, 47, 85, 0.03);
}
.switching__content {
display: none;
width: 100%;
height: 100%;
}
.switching__contentInner {
display: table;
width: 100%;
height: 100%;
}
.switching__contentText {
display: table-cell;
font-size: 30px;
text-align: center;
vertical-align: middle;
}
/* is-active時の状態指定 */
.switching__tab.is-active {
color: #ffffff;
background-color: #202f55;
transition: all 0.2s ease 0s;
}
.switching__content.is-active {
display: block;
}各指定箇所の簡単な説明
簡単に説明しますとまずは下記がタブの装飾指定箇所になります。
大枠の部分、class名switching__tabBoxにタブが横並びになるよう「flexbox（フレックスボックス）」を使い指定しています。
そしてclass名にswitching__tabにタブのボタンのような見た目になるように文字色や背景色・枠線など指定していきます。
ここでまた「flexbox（フレックスボックス）」の指定display: flex;、flex-flow: row wrap;、align-items: center;、justify-content: center;などがありますが、こちらはclass名switching__tabの子要素であるclass名switching__tabTextが上下左右中央に来るように指定している感じです。
そして、class名switching__tabTextにテキストのフォントサイズやテキスト表示位置などを指定してタブの装飾を記述しています。
.switching__tabBox {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.switching__tab {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
width: 33.33%;
min-height: 50px;
color: #000000;
list-style: none;
background-color: #cccccc;
border-right: 1px solid #202f55;
box-sizing: border-box;
cursor: pointer;
}
.switching__tab:last-child {
border-right: none;
}
.switching__tabText {
display: inline-block;
font-size: 20px;
text-align: center;
}その後、下記のclass名switching__contentBoxのコンテンツ部分の見た目を指定して装飾していきます。
こちらに関してはコンテンツ部分がわかる程度に背景色や高さの確保などをしているだけですので、実際の業務ではそのまま使えるものではないので説明は割愛させて頂きます。
コンテンツ部分は自身なりに色々試していいコンテンツを作ってみてください！
.switching__contentBox {
height: calc(100vh - 50px);
background-color: rgba(32, 47, 85, 0.03);
}
.switching__content {
display: none;
width: 100%;
height: 100%;
}
.switching__contentInner {
display: table;
width: 100%;
height: 100%;
}
.switching__contentText {
display: table-cell;
font-size: 30px;
text-align: center;
vertical-align: middle;
}最後に、下記コメントアウト/* is-active時の状態指定 */の部分よりしたの記述ですがコメントに書いている通りで、タブをクリック時に「JavaScript」側で処理してis-activeのclass名が要素に付与された時に見た目の状態が変化するようにする為の指定しています。
class名switching__tabにis-activeのclass名が追加された時タブの装飾を変化させています。
また、class名switching__contentにis-activeのclass名が追加された時はその該当コンテンツが表示されるように指定している感じになります。
※下記を記述漏れしたらコンテンツの切り替えやタブの装飾が変化しないのでご注意くださいね！
/* is-active時の状態指定 */
.switching__tab.is-active {
color: #ffffff;
background-color: #202f55;
transition: all 0.2s ease 0s;
}
.switching__content.is-active {
display: block;
}JavaScriptを記述してタブでコンテンツを切り替えられる処理を追加しよう
CSSでの装飾によりタブボタンやコンテンツ部分の見た目はできたもののそれだけではタブをクリックしても何も動作（変化）しません。
そこでJavaScriptでタブボタン部分をクリックした際に実行したい動作（処理）を追加してタブでコンテンツを切り替えられる処理を下記のように記述し、追加していきます。
// tabs switching
(function () { // 即時実行関数（グローバル汚染対策）
let i = 0; // for文用変数の定義
let j = 0; // 上記内処理でfor文を使用している箇所のfor文用変数定義
let el = {}; // 配列・変数用（巻き上げ防止の為、冒頭にて宣言）
document.addEventListener('DOMContentLoaded', function () {
el.tabs = document.querySelectorAll('.js-switchingTab'); // タブのセレクタ取得
// タブ切り替え処理（クリックイベント）の実行
for (i = 0; i < el.tabs.length; ++i) {
el.tabs[i].addEventListener('click', tabSwitch, false);
}
function tabSwitch () {
el.node = Array.prototype.slice.call(el.tabs, 0);
el.arrayTabs = Array.prototype.slice.call(el.tabs);
el.index = el.arrayTabs.indexOf(this);
// 選択中タブ要素からclassの削除
for (j = 0; j < el.node.length; ++j) {
el.node[j].classList.remove('is-active');
}
// 選択されたタブ要素へclassの追加
this.classList.add('is-active');
// 表示コンテンツのclassの付与の切り替え
el.content = document.querySelectorAll('.js-switchingContent');
el.node = Array.prototype.slice.call(el.content, 0);
// すべての該当コンテンツからclassの削除（非表示にする）
for (j = 0; j < el.node.length; ++j) {
el.node[j].classList.remove('is-active');
}
// 選択されたタブ要素と同様のindex番号のコンテンツ要素にclassを追加（表示する）
el.content[el.index].classList.add('is-active');
};
}, false);
}());※タブボタン部分「js-switchingTab」と切り替えコンテンツ部分「js-switchingContent」の数は同数である必要があるので注意！！
処理内容の簡単な説明
下記ハイライト部分はお作法みたいなものでコメントで書かれている通りなのですが、「即時実行関数」で「グローバル汚染対策」です。
簡単に説明しますとこの関数(function () {～})();の中以外に影響させないでねといった感じのものになります。
より詳しく知りたい方は私のお師匠さんみたいな方が作っているこちらのサイトを参考にしてみてくださいね！
また、ハイライト以外の部分はコメントに書いてある通りですので割愛させて頂きます。
(function () {
// 即時実行関数（グローバル汚染対策）
let i = 0; // for文用変数の定義
let j = 0; // 上記内処理でfor文を使用している箇所のfor文用変数定義
let el = {}; // 配列・変数用（巻き上げ防止の為、冒頭にて宣言）
…処理省略
})();その後に書かれている下記部分は簡単になりますが、jQueryの$(document).ready(function() {～});や$(function() {～});とほぼ同じ意味合いで、最初の HTML 文書の読み込みと解析が完了した時点（スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します）で内部の処理を実行させるという記述になります。
document.addEventListener("DOMContentLoaded", function () {
…処理省略
}, false);そしてここからが実際の処理内容になります。
下記部分はその後の処理に必要なタブのセレクタを取得して変数に格納している記述になります。
el.tabs = document.querySelectorAll('.js-switchingTab'); // タブのセレクタ取得下記部分はコメントに書いている通り「タブ切り替え処理（クリックイベント）の実行」をする為の記述になります。
// タブ切り替え処理（クリックイベント）の実行
for (i = 0; i < el.tabs.length; ++i) {
el.tabs[i].addEventListener("click", tabSwitch, false);
}そして下記function tabSwitch() {～}内に記述されている処理内容がタブがクリックされた時の一連の処理を記述しています。
el.node、el.arrayTabs、el.indexの部分はかなり簡単に説明しますとクリックされたのは何番目のタブかを特定するための記述になります。
その後の処理に関してはコメントに記述している通りですので、一通り見ていただいて参考にしていただければ幸いです。
簡単になりましたがこちらで処理の説明は以上になります。
function tabSwitch () {
el.node = Array.prototype.slice.call(el.tabs, 0);
el.arrayTabs = Array.prototype.slice.call(el.tabs);
el.index = el.arrayTabs.indexOf(this);
// 選択中タブ要素からclassの削除
for (j = 0; j < el.node.length; ++j) {
el.node[j].classList.remove('is-active');
}
// 選択されたタブ要素へclassの追加
this.classList.add('is-active');
// 表示コンテンツのclassの付与の切り替え
el.content = document.querySelectorAll('.js-switchingContent');
el.node = Array.prototype.slice.call(el.content, 0);
// すべての該当コンテンツからclassの削除（非表示にする）
for (j = 0; j < el.node.length; ++j) {
el.node[j].classList.remove('is-active');
}
// 選択されたタブ要素と同様のindex番号のコンテンツ要素にclassを追加（表示する）
el.content[el.index].classList.add('is-active');
};注意
今回は「jQuery」を使用せず「JavaScript」のみで記述されていますので「jQuery」が読み込まれていなくても動作します！
なので新規でページ作成の仕事などの場合は、「jQuery」を読み込ませると無駄なリソースになりますので、他の処理などで必要ない場合に限りますが読み込ませなくても大丈夫です。
ただ、既存サイトの修正などの際は他の処理をすべて把握できていないはずですのでその際は勝手に読み込みの記述を消したりしないように注意しましょう！
まとめ
今回は「JavaScriptでタブで切り替えるコンテンツを作る方法」について簡単にはなりますが、HTML・CSS・JavaScriptでの作り方を説明させていただきました！
「即時実行関数」や「DOMContentLoaded」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。
参考サイト
即時実行関数
DOMContentLoaded
デモページ
デモページはこちらになります。
See the Pen タブ切り替えコンテンツの作り方 by hiroyuki.miyauchi (@hiromiya) on CodePen.
※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。
最後にもう一度ポイントをおさらい
- 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
- タブやコンテンツ部分は自身で装飾できるならどんなデザインでもOKなのでカスタマイズしたり自身で作成してみよう
- タブボタン部分「js-switchingTab」と切り替えコンテンツ部分「js-switchingContent」の数は同数である必要があるので注意！！
- 「is-active」classの付与、削除で状態を変化させる事でタブの装飾やコンテンツの切り替えなどが実装できる！
- 「即時実行関数」で「グローバル汚染対策」をすることができる。
- 「DOMContentLoaded」は最初の HTML 文書の読み込みと解析が完了した時点（スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します）で内部の処理を実行させる事ができる
初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。
