Edited at

5歳でもわかる、タブメニューの作り方(jQuery編)

jquery_tab.001.png

こんにちは、小林です。

 今回はタブメニューをjQueryを用いて作る方法を紹介します。コーポレートサイトの案件で作る機会があったんですが、一言にタブメニューと検索しても様々な作り方が引っかかります。この記事では、「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClassのみを用いた方法で実装します。

 また、初心者の方にわかりやすいよう説明を細かくしていきます。


目次


  1. 今回作るものの確認

  2. 実装の流れ

  3. 実装

  4. まとめ


今回作るものの確認

今回作るタブメニューは以下のものです。

tab_menu_top.gif

 一般的なタブメニューです。押されていない非アクティブなタブは半透明にし、文字色をグレーにしておきます。

 コードは以下です。何か困ったことが起きたらここのコードと見比べてみてください。


index.html

<!doctype html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<!-- タブのボタン部分 -->
<a class="tab_btn is-active-btn" href="#item1">タブ1</a>
<a class="tab_btn" href="#item2">タブ2</a>
<a class="tab_btn" href="#item3">タブ3</a>

<!-- タブのコンテンツ部分 -->
<div class="tab_item is-active-item" id="item1">1番目のコンテンツ</div>
<div class="tab_item" id="item2">2番目のコンテンツ</div>
<div class="tab_item" id="item3">3番目のコンテンツ</div>

<!-- jQueryによるスクリプト -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function() {
/*クリックイベント*/
$('.tab_btn').on('click', function() {
$('.tab_item').removeClass("is-active-item");
$($(this).attr("href")).addClass("is-active-item");
$('.tab_btn').removeClass('is-active-btn');
$(this).addClass('is-active-btn');
});
});

</script>
</body>
</html>



style.css


/*最低限タブが機能するのに必要なスタイル*/
.tab_item {
display: none;
}

.is-active-item {
display: block;
}

/*ここから下は見た目だけ*/
a {
display: block;
color: inherit;
text-decoration: none;
}

.tab_btn {
font-size: 24px;
padding: 5px;
border-bottom: solid 1px #E0F2F7;
display: inline-block;
background-color: #E0F2F7;
opacity: 0.5;
border-radius: 5px 5px 0 0;
}

.is-active-btn {
opacity: 1;
border-bottom: solid 1px #E0F2F7;
color: #00BFFF;
}

.tab_item {
width: 400px;
height: 300px;
padding: 5px;
color: #00BFFF;
background-color: #E0F2F7;
}



実装の流れ



  1.  まず、タブメニューが機能するために最低限必要な部分から作ります。


    • htmlでタブのボタンとコンテンツの要素を用意

    • 表示/非表示状態のcssを用意

    • タブボタンがクリックされた時に表示/非表示を切り替えるスクリプトを用意



  2. 見た目を整えるためのコードをhtml、css、jQueryに追加して完成です。



 実装


html

早速htmlから用意しましょう。以下のコードになります。


index.html


<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<!-- タブのボタン部分 -->
<a class="tab_btn" href="#item1">タブ1</a>
<a class="tab_btn" href="#item2">タブ2</a>
<a class="tab_btn" href="#item3">タブ3</a>

<!-- タブのコンテンツ部分 -->
<div class="tab_item is-active-item" id="item1">1番目のコンテンツ</div>
<div class="tab_item" id="item2">2番目のコンテンツ</div>
<div class="tab_item" id="item3">3番目のコンテンツ</div>

</body>
</html>


ブラウザ上では以下のように表示されます。

スクリーンショット 2018-10-01 16.22.02.png

ただリンクと文字が並んでるだけですね。

 今回はタブボタンにaタグを使っていますが、これはタブボタンにカーソルを合わせた時にクリックできることをわかりやすくするためです。また、aタグならhref属性でボタンとコンテンツの関連が明示できる利点もあります。

 .tab_btnというクラスはあとでjQueryから指定するためのセレクタとして、.tab_item.is-active-itemというクラスは表示/非表示のために用います。


css

続いて表示/非表示に関するcssを用意します。


style.css


/*最低限タブが機能するのに必要なスタイル*/
.tab_item {
display: none;
}

.is-active-item {
display: block;
}


タブのコンテンツは一旦全て非表示状態にしておき、表示させたいものにだけis-active-itemクラスをつけて表示させます。


jQuery

いよいよjQueryでクラスの付け替えをしていきます。まずはjQueryを読み込みます。


index.html


<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


scriptタグはbodyの一番下に書いてください。

そして、その次の行にクラス付け替えのコードを実装します。


index.html


<script>
$(function() {
/*クリックイベント*/
$('.tab_btn').on('click', function() {
/* 一旦.tab_itemから.is-active-itemを外す */
$('.tab_item').removeClass("is-active-item");
/* クリックした.tab_btnに対応する.tab_itemに.is-active-itemをつける */
$($(this).attr("href")).addClass("is-active-item");
});
});
</script>

 今回の実装の考え方は、ボタンがクリックされた時にコンテンツ側の.is-active-itemを一旦外して、クリックされたボタンに対応するコンテンツに付け直すという流れです。

 なので、.tab_btnに対してクリックイベントを定義し、クリックされたボタンのhref属性を取得してその要素に.is-active-itemをつけます。

 thisはクリックされた要素を表します。

 ここまでで、タブメニューの最低限の機能が実装できました。以下のように機能するかと思います。

tab_menu.gif


見た目の調整

ここからはあくまでデザインの一例ですので、参考程度に留めます。

index.htmlとstyle.cssにそれぞれ追記します。


index.html


<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<!-- is-active-btnクラスを追加 -->
<a class="tab_btn is-active-btn" href="#item1">タブ1</a>
<a class="tab_btn" href="#item2">タブ2</a>
<a class="tab_btn" href="#item3">タブ3</a>

<div class="tab_item is-active-item" id="item1">1番目のコンテンツ</div>
<div class="tab_item" id="item2">2番目のコンテンツ</div>
<div class="tab_item" id="item3">3番目のコンテンツ</div>

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function() {
$('.tab_btn').on('click', function() {
$('.tab_item').removeClass("is-active-item");
$($(this).attr("href")).addClass("is-active-item");

//以下2行を追加
$('.tab_btn').removeClass('is-active-btn');
$(this).addClass('is-active-btn');
});
});

</script>
</body>
</html>



style.css

.tab_item {

display: none;
}

.is-active-item {
display: block;
}

/**************/
/*ここから下を追加*/
/**************/

/* aタグをブロック要素にする。文字色は親クラスと同様に、下線は消す */
a {
display: block;
color: inherit;
text-decoration: none;
}

.tab_btn {
font-size: 24px;
padding: 5px;
background-color: #E0F2F7;
    display: inline-block; /* ボタンを横並びに。flexboxなどでも可 */
opacity: 0.5; /* 非アクティブなボタンは半透明にする */
border-radius: 5px 5px 0 0;
}

.is-active-btn {
opacity: 1; /* アクティブなボタンは半透明を解除 */
color: #00BFFF; /* 文字色も変える */
}

.tab_item {
width: 400px;
height: 300px;
padding: 5px;
color: #00BFFF;
background-color: #E0F2F7;
}


ボタンもコンテンツと同様に.is-active-btnクラスの付け替えを行って見た目を調整しています。


まとめ


  • jQueryはタブの付け替えのみ行う

  • cssで表示/非表示状態を用意しておく

  • クリックされたら一旦active系クラスを外して、クリックされたものに付け直す

以上です。最後まで読んでいただきありがとうございました!


個人ブログ紹介

個人のブログを運営しております。興味ある型は是非!

http://itokoba.com