【jQuery】タブ切り替え機能を実装する（コピペで簡単）

  jQuery プログラミング

この記事を書いている僕は、フロントエンドエンジニア歴が15年ほど。

web業界からゲーム業界まで数多くのwebサイトやアプリケーションを制作しています。

こういった僕が、分かりやすく解説していきます。

読者の悩み

  • タブメニューをクリックしたら表示内容も切り替わるようなものをjQueryで実装したい
  • JavaScriptはあまりわからないし、いまいち仕組みが分かってないのでコーディングにつまずいてる
  • 複雑なことはしないで、jQueryとCSSを組み合わせて簡単にサクッと作れる方法が知りたい

こういった疑問に答えます。

本記事の内容

  • jQueryでタブ切り替えメニューの実装方法をわかりやすく解説します
  • デモページとサンプルコードで確認しながらコピペできます
  • シンプルでカスタマイズやメンテナンスもしやすく簡単に作れます

デモページを用意

デモページを用意してますので実際に動きが確認できます。

DEMO

サンプルコードを用意

コード［HTML / SCSS / CSS / jQuery］をGitHubの方でも確認できます。

実際のソースコードをアップしているのでクローンしてもOKです。

phpファイル
scssファイル
jsファイル
cssファイル

デモページとソースコードを確認しながらご覧ください。

骨組みは以下の３つです。

  • タブを切り替える下準備
  • siblingsメソッド
  • attrメソッド

ではコードを見ていきます。

目次

タブを切り替える下準備

タブとタブを切り替えて表示するコンテンツの要素をそれぞれ作成します。

タブの仕組み

<section class="c-tab">
  <!-- タブ切替ボタン -->
  <ul class="c-tab__nav">
    <li id="tabDetail" class="c-tab__tabbar jc-tab js-active"><a href="#ji-tab-1">DESIGN</a></li>
    <li id="tabTable" class="c-tab__tabbar jc-tab"><a href="#ji-tab-2">CODING</a></li>
  </ul>
  <section id="ji-tabContainer" class="c-tab__wrapper">
    <!-- タブ表示コンテンツ1 -->
    <article id="ji-tab-1" class="c-tab__content jc_tabContent02 js-show">
      <div class="c-tab__image">
        <img src="https://buff-design.com/demo/img/shutterstock_364944905.jpg">
      </div>
    </article>
    <!-- タブ表示コンテンツ2 -->
    <article id="ji-tab-2" class="c-tab__content jc_tabContent02">
      <div class="c-tab__image">
        <img src="https://buff-design.com/demo/img/shutterstock_365414408.jpg">
      </div>
    </article>
  </section>
</section>

タブ切替ボタン

一つ目のタブボタンにjs-activeクラスをつけておきます。 js-activeクラスをつけることでボタンをアクティブ状態にします。

&__tabbar {
  cursor: pointer;
  display: block;
  padding: 0;
  margin: 0 0 4px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: $Dark-100;
  background-color: $Surface;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: auto;
  box-shadow: 0 4px 0 $Dark-026;
    ︙
  &.js-active {
    display: block;
    padding: 0;
    margin: 0 0 4px;
    width: 50%;
    height: auto;
    text-align: center;
    color: $Light-100;
    font-size: 18px;
    text-decoration: none;
    background-color: $Primary;
    box-shadow: 0 4px 0 $Primary_Dark;
    display: flex;
    align-items: center;
    justify-content: center;
  }
    ︙
}

タブ表示コンテンツ

タブの中身の一つ目にjs-showクラスをつけておきます。 js-showクラスをつけることでコンテンツを表示状態にします。

&__content {
  display: none;
  padding: 0;
  margin: 0;

  &.js-show {
    display: block;
  }
}

siblingsメソッド

siblingsメソッドはjQueryオブジェクトで指定した要素の兄弟要素（同じ階層の要素）でセレクタにマッチする要素を選択します。引数を設定しない場合はすべての兄弟要素を選択します。

$('.jc-tab a').on('click', function () {
$(this).parent().addClass('js-active').siblings('.js-active').removeClass('js-active');
    ︙
});

ここでは $(this).parent() は jc-tab を指定しています。

クリックイベントでこのセレクタに js-active を追加します。

そしてsiblingsメソッド js-active がマッチする場合はこのクラスを削除します。

attrメソッド

引数に属性名を指定することで属性の値を取得します。

$('.jc-tab a').on('click', function () {
    ︙
var jc_tabContent02 = $(this).attr('href');
$(jc_tabContent02).addClass('js-show').siblings('.js-show').removeClass('js-show');
    ︙
});

タブをクリックすると、attrメソッドを利用してhref属性の値を取得し変数jc_tabContent02に代入します。

変数で指定した要素に js-show クラスを追加しコンテンツを表示させます。

そしてsiblingsメソッド js-show がマッチする場合はこのクラスを削除しコンテンツを非表示にします。

今回は以上になります。

次回はタブ切り替えボタンが追従させる実装方法をご紹介します。ボタンを目立たせたい場合などに便利ですので作成方法が不安な方は是非参考にしていただけると嬉しいです。

一覧へ

Recommended