【jQuery】タブ切り替え機能を実装！URLハッシュと連動させる方法

シュウ

今回は【jQuery】タブ切り替え機能を実装！URLハッシュと連動させる方法について
の解説になります！

こんな方に読んでほしい

jQueryを学び始めた方へ
クリックで切り替わるタブ機能の作り方！
今回はページ遷移後もタブを自動表示させる方法について解説しております。

確かな力が身につくJavaScript「超」入門第2版

created by Rinker

[記事の内容]

タブ切り替えについて

今回の記事では、タブ切り替え機能を実装し、URLと連動させる方法についての記事になります。
URLと連動することによって、ボタンとの連動も可能になります。

タブを実装させる HTML編

今回はhtmlファイルを2つ用意します。
デモサイトはコチラから。

ここでは、index.htmlには、シンプルなボタンを作成します。
tab.htmlには、タブのリストの1つ目には、activeを指定し、コンテンツの1つ目には、showを指定しておいてください。

●index.html: タブに遷移する用のボタンを作成します

●tab.html: タブを実装します

<ul>
 <li><a href="tab.html#tab01">HTML</a></li>
 <li><a href="tab.html#tab02">CSS</a></li>
 <li><a href="tab.html#tab03">jQuery</a></li>
</ul>

<div class="top-tab-container">
　<div class="tab-container">
　　<div class="tab active">HTML</div>
　　<div class="tab">CSS</div>
　　<div class="tab">jQuery</div>
　</div>
  <!--タブのリスト-->

　<div class="content-container">
　　<div class="content show">HTMLの記事が入ります</div>
　　<div class="content">CSSの記事が入ります</div>
　　<div class="content">jQueryの記事が入ります</div>
　</div>
  <!--タブのコンテンツ-->
</div>
<!--タブ全体-->

タブを実装させる CSS編

次にCSSです。
デモサイトはコチラから。

ここでは、contentに、 display: noneで非表示にしておきます。
content.showに、display: blockの指定しておいてください。
あとは、装飾になりますので自由に指定してください。

.content {
  display: none;
}
.content.show {
  display: block;
}
.top-tab-container {
  background: #d8d9ba;
}
.tab-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 0;
}
.tab-container .tab {
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  background: #395848;
}
.tab-container .tab.active {
  background: #d8d9ba;
  color: #333;
}
.content-container {
  padding: 20px;
}

シンプルなタブを実装させる js編

次にjsです。ますは、シンプルなタブを実装させます。
以下のjsはシンプルな切り替えのタブになります。
デモサイトはコチラから。

$(function() {
    let tabs = $(".tab");
    $(".tab").on("click", function() {
        $(".active").removeClass("active");
        $(this).addClass("active");
        const index = tabs.index(this);
        $(".content").removeClass("show").eq(index).addClass("show");
    });
});

URLハッシュと連動させるタブを実装させる js編

先ほどのタブとは違い、index.htmlでボタンを作成した際に、urlと連動するjsになります。
デモサイトはコチラから。

$(function() {
  function activateTabFromHash() {
    // ページ読み込み時の処理
    let hash = location.hash;
    if (hash) {
      let tabNumber = hash.replace("#tab0", "");
      let tabIndex = parseInt(tabNumber) - 1;
       // tabIndexが有効な範囲内か確認
      if (tabIndex >= 0 && $(".tab").length > tabIndex) {
        $(".tab").removeClass("active");
        $(".content").removeClass("show");
        $(".tab").eq(tabIndex).addClass("active");
        $(".content").eq(tabIndex).addClass("show");
      }
    }
  }
  // ページが読み込まれたときに実行
  activateTabFromHash();
  // タブクリック時の既存の処理
  let tabs = $(".tab");
  tabs.on("click", function() {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});