[JavaScript]タブを使った表示の切り替え

2024.2.9

asami-furuta

この記事では、タブを使った表示内容を切り替える動きのJavaScriptでの実装方法をまとめます。

INDEX

タブを使った表示の切り替え

デモはこちらです。

See the Pen タブの表示切り替え by asamifuruta (@asamih5) on CodePen.

HTML

<div class="wrapper">
　<!-- 上部のタブ -->
  <ul class="tab">
    <li><a href="#tab_a">タブA</a></li>
    <li><a href="#tab_b">タブB</a></li>
  </ul>

　<!-- コンテンツ -->
  <div id="tab_a" class="tab-area">
    <p>タブAを表示中です。</p>
  </div>
  <div id="tab_b" class="tab-area">
    <p>タブBを表示中です。</p>
  </div>
</div>

CSS

.tab-areaをdisplay: none;の非表示にしておき、JavaScriptによってis-activeクラスが付与されたときのdisplay: block;も設定しておきます。

ul {
  padding: 0;
  margin: 1rem 1rem 0;
}

li {
  list-style: none;
}

p{
  margin: 1rem;
}

.tab {
  display: flex;
}

.tab li {
  width: 100px;
}

.tab li a {
  display: block;
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 10px 10px 0 0;
  text-align: center;
  font-size: 18px;
  text-decoration: none;
  color: #4d4d4d;
}

.tab li.active a {
  background: #fff8dd;
}

.tab-area {
  display: none;
  padding: 1rem 0;
  margin: 0 1rem 0;
  background: #fff8dd;
}

.tab-area.is-active {
  display: block;
}

JavaScript

タブの切り替えの動きの関数を書きます。

function GethashID(hashIDName) {
    if (hashIDName) {
        //タブ内のaタグ全てを取得
        $(".tab li").find("a").each(function () {
            //aタグのリンク名を取得
            var idName = $(this).attr("href");
            //指定されたURLのidが同じかをチェック
            if (idName == hashIDName) {
                //指定されたURLと同じidのaの親要素(li)をparentElmに代入
                var parentElm = $(this).parent();
                //全てのliのactiveクラスを取り除く
                $(".tab li").removeClass("active");
                //parentElmにactiveクラスを追加
                $(parentElm).addClass("active"); 
                //全てのtab-areaのis-activeクラスを取り除く
                $(".tab-area").removeClass("is-active");
                //表示エリアにis-activeクラスを追加
                $(hashIDName).addClass("is-active"); 
            }
        });
    }
}

次に、タブをクリックしたときの処理を書きます。

$(".tab a").on("click", function () {
    //タブ内のリンク名を取得
    var idName = $(this).attr("href");
    //設定したタブの読み込みとaタグを無効にする
    GethashID(idName);
    return false;
});

ページが読み込まれたときの処理を開いておくタブを設定しておけば完成です！

$(window).on("load", function () {
    // 最初のliにactiveクラスを追加
    $(".tab li:first-of-type").addClass("active");
    //最初のareaにis-activeクラスを追加
    $(".tab-area:first-of-type").addClass("is-active");
});