お問い合わせ

【jQuery】タブの切り替え機能を簡単に実装する方法【コピペOK】

【jQuery】タブの切り替え機能を簡単に実装する方法【コピペOK】

こんにちは、リプロネクストエンジニアの早川です。

 

今回はWebサイトにタブの切り替え機能を実装する方法について解説していきます。

 

タブの切り替え機能を実装することで、限られた画面内で複数のコンテンツを見せたい場合に有効です。

 

実装方法についてはjQueryを使用しますが、比較的簡単に実装できる例をご紹介しています。

 

プラグインなしでも簡単に実装できますので、ぜひお試しください。

 

タブの切り替え機能を実装する例

いきなりですが、結論として、HTML/CSS/JSを下記のように記述すれば、タブの切り替え機能を実装できます。

 

See the Pen
【jQuery】タブの切り替え表示を簡単に自作する方法【コピペOK】
by Yuki Hayakawa (@hayakawayuk1)
on CodePen.

 

タブをクリックすれば、それに応じたコンテンツが表示されるのがお分かりかと思います。

 

下記に、HTML/CSS/JSの記述ポイントを解説していきます。

HTMLのマークアップ

タブと、各タブに応じて表示させるコンテンツとなる要素を記述していきます。

<!-- タブ -->
<ul class="tab-button">
  <li class="active">タブA</li>
  <li>タブB</li>
  <li>タブC</li>
</ul>

<!-- タブを切り替えて表示するコンテンツ -->
<div class="tab-content">
  <div class="active">タブAのコンテンツです</div>
  <div>タブBのコンテンツです</div>
  <div>タブCのコンテンツです</div>
</div>

ポイントとしては、タブの一つ目にactiveクラスを付け、タブのコンテンツの一つ目にもactiveクラスを付けておきます。

 

activeクラスが付いている要素を表示に、activeクラスが付いていない要素は非表示になる仕様ですね。

CSSでデザイン

当記事では必要最低限のスタイルとしていますが、各々カスタマイズしてOKです。

/* タブ */
.tab-button {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tab-button li {
  cursor: pointer;
  padding: 8px 20px;
  background: #f5f5f5;
}
.tab-button li.active {
  color: #fff;
  background: #000;
}

/* タブを切り替えて表示するコンテンツ */
.tab-content div {
  display: none;
  padding: 20px;
  border: 1px solid #000;
}
.tab-content div.active {
display: block;
}

ポイントとしては、activeとそれ以外が、どのように表示されたら良いか書けばOKです。

jQueryでタブを動作させる

jQueryでは、タブをクリックすると、タブとコンテンツのそれぞれのclassの値を、addClassメソッド/removeClassメソッドで追加/削除します。

それにより、タブをクリックして切り替えた際に、コンテンツの内容を変更します。

$(function(){
  // ①タブをクリックしたら発動
  $('.tab-button li').on('click', function(){
    // ②タブの切り替え
    $('.active').removeClass('active');
    $(this).addClass('active');
    // ③タブを切り替えて表示するコンテンツ
    var index = $('.tab-button li').index(this);
    $('.tab-content div').removeClass('active').eq(index).addClass('active');
  });
});

 

最後に

タブの切り替え機能は多くのサイトが実装されるものですが、いざ実装となった場合、jQueryに慣れていないと実装が難しかったりします。

 

しかし、上記で示した方法であれば比較的簡単に実装できるので、ぜひ試してくださいね!

早川
早川
WEBエンジニア・カメラマン
2020年11月入社。新潟市出身。結婚式場カメラマンのアシスタント、webデザイナー、フロントエンジニアなどのキャリアを積み、フリーランスを経てリプロネクストへ。車が好きな一女のパパ。