タブメニューの実装方法（jQuery編）

ロッチくん

なるべく簡単にタブメニューを実装する方法が知りたいニャ

タブで切り替えて複数のメニューの情報を掲載できるタブメニューはWEBデザインの現場でも頻出度の高いUIパーツですので是非覚えていきましょう！

最初に
コード
ちょこっと解説
最後に

最初に

タブメニューで検索すると意外とたくさんのやり方があり、中には結構複雑なやり方もあります。

今回紹介するやり方は初心者向けの非常にコンパクトなやり方ですが最低限切り替え時にアニメーションもあるので意外と使えると思います。

こちらがデモサイトです。

jQueryの読み込み方法はこちらをご覧ください。

jQueryの読み込み方法

jQueryを読み込むにはダウンロードしてサーバーにアップロードする方法とCDNで読みこむ方法とありますが、ここでは手軽にすぐ読み込めるCDNを使った方法を紹介します。

それでは実際にコードを見ていきましょう！

コード

HTML

<nav class="tabArea">
    <ul class="tabMenu">
        <li class="active">タブ1</li>
        <li>タブ2</li>
        <li>タブ3</li>
    </ul>
    <ul class="tabContents">
        <li>タブ1の内容がここに入ります。</li>
        <li>タブ2の内容がここに入ります。</li>
        <li>タブ3の内容がここに入ります。</li>
    </ul>
</nav>

CSS

.tabArea {
  max-width: 700px;
  margin: 0 auto;
  padding: 150px 0;
}
.tabMenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tabMenu li {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  width: 33%;
  height: 50px;
  border-radius: 15px 15px 0 0;
  background-color: aquamarine;
  border: 3px solid aquamarine;
}
.tabMenu li.active {
  background-color: white;
}
.tabContents {
  padding: 35px 20px;
  height: 250px;
  border: 3px solid aquamarine;
  border-top: 1px solid aquamarine;
}
.tabContents li:not(:first-of-type) {
  display: none;
}

JavaScript

$(".tabMenu li").on("click", function() {

  $(".tabMenu li").removeClass("active");
  $(this).addClass("active");
  let index = $(this).index();
  $(".tabContents li").hide().eq(index).fadeIn(300);

});