初心者向け！jQueryを使った簡単なタブメニューの作り方

jquery 2024/02/04

1 デモ
2 HTMLの設定
3 CSSの設定
4 jQueryの実装

この記事では、jQueryを使用して簡単に実装できるタブメニューの作り方について解説します。初心者でもわかりやすい手順で、ウェブサイトにタブメニューを導入しましょう。

デモ

See the Pen tab-menu by hide (@hide225) on CodePen.

HTMLの設定

まず、HTMLに基本的な構造を組みます。以下は3つのタブとそれに対応するコンテンツの簡単な例です。
各tabクラスにカスタムデータ属性の「data-tab」を設定し、どのタブがクリックされたか特定をします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タブメニュー</title>
</head>
<body>

  <div class="tab-menu">
    <div class="tab active" data-tab="tab1">タブ1</div>
    <div class="tab" data-tab="tab2">タブ2</div>
    <div class="tab" data-tab="tab3">タブ3</div>
  </div>

  <div class="tab-content active" id="tab1">コンテンツ1の内容。コンテンツ1の内容。コンテンツ1の内容。コンテンツ1の内容。コンテンツ1の内容。コンテンツ1の内容。</div>
  <div class="tab-content" id="tab2">コンテンツ2の内容。コンテンツ2の内容。コンテンツ2の内容。コンテンツ2の内容。コンテンツ2の内容。コンテンツ2の内容。</div>
  <div class="tab-content" id="tab3">コンテンツ3の内容。コンテンツ3の内容。コンテンツ3の内容。コンテンツ3の内容。コンテンツ3の内容。コンテンツ3の内容。</div>

</body>
</html>

CSSの設定

見栄えを良くするために、CSSでスタイルを追加します。以下は基本的なスタイルの例です。

.tab-menu {
  display: flex;
  width: fit-content;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  background-color: #e0e0e0;
}

.tab.active {
  background-color: #333;
  color: #fff;
}

.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #333;
}

.tab-content.active {
  display: block;
}

jQueryの実装

最後に、jQueryを使用してタブメニューを実装します。以下が簡単なコード例です。
tabクラスをクリック時、CSSで設定したactiveクラスの付け外しをするシンプルな仕組みです。

$(document).ready(function () {
  $('.tab').click(function () { //tabクラスをクリックした時
    const tabId = $(this).data('tab'); //クリックしたtabクラスのカスタムデータ属性の値を定数tabIDに格納

    $('.tab').removeClass('active');
    $('.tab-content').removeClass('active');

    $(this).addClass('active');
    $('#' + tabId).addClass('active');
  });
});

以上で、シンプルなタブメニューが完成しました。タブをクリックすると、対応するコンテンツが切り替わることが確認できます。

これで、簡単に導入できるjQueryを使ったタブメニューの作成が完了しました。実際に試して、自分のウェブサイトに組み込んでみてください。

\ シェアしてね！ /