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を指定

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいデザイナーです。 趣味でアプリ開発(ペア、デザイン担当)やNuxt.jsやらをいじってますが、やばいな~と感じつつネットの波に取り残されないようにワカッタこと、キヅイタことをカキカキします。