jQueryを使ってタブの切り替えを実装する

JavascriptのjQueryを使ってタブの表示・非表示の切り替える方法を紹介します。

デモ

See the Pen
js switch tab by kura (@kuranopen)
on CodePen.

Javascript

$(".tab-content").not(":eq(0)").hide();

$(".tab a").click(function (event) {
  event.preventDefault();

  $(this).closest(".tab").addClass("active");
  $(this).closest(".tab").siblings().removeClass("active");

  var targetTab = $(this).attr("href");
  $(".tab-content").not(targetTab).hide();
  $(targetTab).fadeIn();
});

使い方

• タブのClassにtabを指定します
• tab内のaタグのhrefにタブのIDを指定
• タブのコンテンツにタブのIDを指定
• タブのコンテンツにtab-contentを指定

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選