HOME > jQuery > jQueryで動くタブメニューの作り方【コピペで1分】

jQueryで動くタブメニューの作り方【コピペで1分】

目次: jQueryで動くタブメニューのDEMO; jQueryで動くタブメニューの作り方解説; HTML記述; css記述; jQuery記述

jQueryで動くタブメニューのDEMO

DEMOページ

jQueryで動くタブメニューの作り方解説

jQueryを使用してタブのメニューと中のコンテンツが連動して動くように実装。

1．HTMLは親要素と子要素のリスト（ul・li）要素で構成する
2．コンテンツにdisplay:none;をかけて非表示にしておき、acvtiveクラスを作りdisplay:block;を設定
3．最初に表示しておきたいメニュとコンテンツにactiveを設定
4．jQueryを使用してクリックされたものと紐づいたコンテンツが表示されるように設定
5．正しく動作していれば完成です。

HTML記述

HTMLをbody内の表示位置に記載します。

<ul class="tabmenu">
    <li class="tablist active">JavaScript</li>
    <li class="tablist">jQuery</li>
    <li class="tablist">cssAnimation</li>
    <li class="tablist">HTML</li>
  </ul>
  <ul>
    <li class="tabcontents active">コンテンツタブ1<br>JavaScript</li>
    <li class="tabcontents">コンテンツタブ2<br>jQuery</li>
    <li class="tabcontents">コンテンツタブ3<br>cssAnimation</li>
    <li class="tabcontents">コンテンツタブ4<br>JavaScript</li>
  </ul>

css記述

cssを<style>~</style>または自作cssの中に記述します。

<style>
/* リセット */
*{
    margin:0;
    padding:0;
}

/* タブ親指定 */
.tabmenu {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}

/* タブメニュー指定 */
.tablist {
    display: inline-block;
    border: 1px solid #333;
    padding: 20px 40px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
/* 最後のタブメニュー以外にかける指定 */
.tablist:not(:last-child) {
    margin-right: 1px;
}

/* タブコンテンツ指定 */
.tabcontents {
    display: none;
    border: 1px solid #333;
    padding: 20px 40px;

}

/* クリックされた時の指定 */
.tablist.active,
.tabcontents.active {
    display: block;
}
.tablist.active{
    background-color: #8ed8ff;
}
</style>

jQuery記述

jQueryCDN 最新版などは公式サイトをご確認ください。

jQueryを<script>~</script>または自作jsの中に記述します。

<script>
// ドキュメントの読み込みが完了した時に実行する関数
$(function() {
    // クリックイベントを.tablist要素すべてに対して設定する
    $('.tablist').on('click', function() {
    // .tablistと.tabcontentsの要素からactiveクラスをすべて削除する
    $('.tablist, .tabcontents').removeClass('active');
    // クリックされた.tablist要素にactiveクラスを追加する
    $(this).addClass('active');
    // クリックされた.tablist要素のインデックスを取得して変数indexに格納する
    let index = $('.tablist').index(this);
    // .tabcontentsの中でindex番目の要素にactiveクラスを追加する
    $('.tabcontents').eq(index).addClass('active');
    });
});
</script>