jquery タブ切り替え id

jQueryで実装！シンプルで簡単なタブ切り替え（ID指定）

jQueryで実装！シンプルで簡単なタブ切り替え（ID指定）

jQueryを使って、IDを指定してタブ切り替えを実装する方法を分かりやすく解説します。コピペで使えるサンプルコード付きで、初心者の方でも簡単に実装できます。

タブ切り替えとは？

ウェブサイトで見かける、複数のコンテンツを切り替えて表示するUIを「タブ」と呼びます。クリックするだけで表示内容を切り替えられるため、ユーザーにとって使いやすい設計を実現できます。

jQueryを使ったタブ切り替えの実装方法 (ID指定)

jQueryを使うことで、シンプルで分かりやすいコードでタブ切り替えを実装できます。ここでは、HTMLのID属性を指定してタブを切り替える方法を解説します。

1. HTMLのマークアップ

タブのHTMLは、以下のように記述します。


<ul class="tab-menu">
  <li class="active"><a href="#tab1">タブ1</a></li>
  <li><a href="#tab2">タブ2</a></li>
  <li><a href="#tab3">タブ3</a></li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-panel active">
    タブ1の内容
  </div>
  <div id="tab2" class="tab-panel">
    タブ2の内容
  </div>
  <div id="tab3" class="tab-panel">
    タブ3の内容
  </div>
</div>

2. CSSの記述

タブのデザインは、CSSで自由にカスタマイズできます。


.tab-menu {
  /* タブメニューのスタイル */
}

.tab-menu li {
  /* タブ項目のスタイル */
}

.tab-menu .active {
  /* アクティブなタブのスタイル */
}

.tab-content {
  /* タブコンテンツのスタイル */
}

.tab-panel {
  /* タブパネルのスタイル */
  display: none; /* 初期状態では非表示 */
}

.tab-panel.active {
  /* アクティブなタブパネルのスタイル */
  display: block; /* 表示 */
}

3. jQueryの記述

タブ切り替えの動作は、jQueryで実装します。


$(function(){
  // タブメニューのクリックイベント
  $('.tab-menu li a').on('click', function(e){
    e.preventDefault(); // リンクのデフォルト動作を無効化

    // アクティブなタブのクラスを削除
    $('.tab-menu li').removeClass('active');
    $('.tab-panel').removeClass('active');

    // クリックされたタブにactiveクラスを追加
    $(this).parent().addClass('active');
    $($(this).attr('href')).addClass('active');
  });
});

まとめ

jQueryを使うことで、IDを指定したシンプルなタブ切り替えを簡単に実装できます。サンプルコードを参考に、ご自身のウェブサイトに最適なタブを実装してみてください。

関連情報

よくある質問

質問 回答
タブの数を増やしたい場合は？ HTMLにタブメニューとタブパネルを追加し、それぞれのIDをjQueryのコードに反映させてください。
タブのスタイルを変更したい場合は？ CSSの記述を変更することで、タブのデザインを自由にカスタマイズできます。
JavaScriptのコードが動かない場合は？ jQueryが正しく読み込まれているか、コードにエラーがないかを確認してください。ブラウザの開発者ツールを利用すると、エラーの特定に役立ちます。

その他の参考記事:タブ 切り替え jquery