初心者必見!jQueryでタブの切り替えを超簡単に自作する方法(コピペok)

jQueryでタブ切り替えを自作する方法

どーも、アサル(ASAL)です。

今回は、ウェブサイトでよく見る、レスポンシブ対応可のタブの切り替えをjQueryを使って超簡単に実装できる方法を徹底解説していきたいと思います。

特にjQueryのソースコードについて、重点的にひとつずつ分かりやすく解説していきます。

お忙しい方に向けて、最初に全てのソースコードを載せておくので、コピペでokです!

今回ご紹介するのはタブが3つですが、タブと中身を減らして2つにしたり、コピペで増やせば4つ、5つと増やしていけるので、用途に合わせて調節ができます!

あとは、CSSでお好みのデザインに変更したりして、使って下さい!

それでは最初に、タブ1からタブ3までをPCの方はクリック、スマホの方はタップしてみて、以下のタブ切り替えで中身も切り替わる(Resultから確認できます)とソースコード(HTML、CSS、jQuery)のサンプルを確認してみて下さい。

See the Pen
LYEjmQe
by investment4057 (@investment4057)
on CodePen.

タブを切り替えると、その中身も切り替わっているのが確認できましたか?

では早速、ソースコードの解説をしていきます。

HTML

(ソースコードにカーソルを当てると右上にコピーボタンが表示されます)

<div class="container">
  <ul class="tab-list">
    <li class="tab box-active">タブ1</li>
    <li class="tab">タブ2</li>
    <li class="tab">タブ3</li>
  </ul>
  <div class="tabbox-contents">
    <div class="tabbox box-show">
      <p>タブ1の中身が入ります。</p>
      <p>タブ1の中身が入ります。</p>
      <p>タブ1の中身が入ります。</p>
    </div>
    <div class="tabbox">
      <p>タブ2の中身が入ります。</p>
      <p>タブ2の中身が入ります。</p>
      <p>タブ2の中身が入ります。</p>
    </div>
    <div class="tabbox">
      <p>タブ3の中身が入ります。</p>
      <p>タブ3の中身が入ります。</p>
      <p>タブ3の中身が入ります。</p>
    </div>
  </div>
</div>

HTMLでは、タブの要素とタブの中身の要素の2つで構成されています。

また、サイトを読み込んだ時にデフォルトで表示されるのが、classにbox-activeが付いているタブ1とclassにbox-showが付いているタブの中身1となります。

タブと中身の表示と非表示の方法についてはCSSとjQueryで行ないます。

CSS

/* ↓ここから下は、ブラウザがデフォルトで持っているCSSを打ち消すCSS↓ */
html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align:baseline;
  list-style: none;
}
/* ↑ブラウザがデフォルトで持っているCSSを打ち消すCSSここまで↑ */

/* ↓外枠↓ */
.container {
  margin: 10px;
  border: 1px solid #ccc;
}
/* ↓タブを横並び↓ */
.tab-list {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
/* ↓タブのデザイン↓ */
.tab {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  border-left: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
.tab:first-child {
  border-left: none;
}
/* ↓タブがアクティブになっている時のデザイン↓ */
.tab-active {
  color: #FFF;
  background: #19b5d1;
  transition: all 0.2s ease-in-out;
}
/* ↓タブの中身↓ */
.tabbox {
  /* ↓タブの中身を最初は非表示↓ */
  display: none;
  /* ↓タブの中身の余白↓ */
  padding: 15px;
}
/* ↓このクラスがついている時だけタブの中身を表示↓ */
.box-show {
  display: block;
}

ここでは、要素の表示と非表示を利用します。

タブの共通のclassであるtab-listは、display: none;で表示にして、classにtab-activeが付いているときは、display: block;で表示させています。

タブの中身も同じく、中身の共通のclassであるtabboxは、display: none;で表示にして、classにbox-showが付いているときは、display: block;で表示させています。

あとは、クリックをしたときにclassの付け替えができたら、タブ切り替えが完成です!

「でも、それじゃあclassの付け替えはどうやってするんだ!?」と疑問の方!ここで、jQueryの登場ですよ!

jQuery


$(function() {
    // ↓タブをクリックした時の処理↓
    $('.tab').click(function(){
        // ↓現在アクティブなタブを切り替え↓
        $('.tab-active').removeClass('tab-active');
        // ↓タブをアクティブにする↓
        $(this).addClass('tab-active');
        // ↓現在アクティブなタブの中身を非表示
        $('.box-show').removeClass('box-show');
        // ↓クリックしたタブから順番を取得↓
        const index = $(this).index();
        // ↓クリックしたタブと同じ順番のコンテンツを表示↓
        $('.tabbox').eq(index).addClass('box-show');
    });
});

最後にjQueryで仕上げです!

jQueryでは、タブをクリック、もしくはタップしたときに、それぞれのclassを変更する処理を行なうことで、タブを切り替えたときにタブの中身も切り替わるようにします。

タブの切り替え

まず、タブをクリックした際に、$('.tab-active').removeClass('tab-active');で、現在アクティブのタブが持つclassのtab-activeを削除します。

そして、$(this).addClass('tab-active');でクリックしたタブに対してclassのtab-activeを追加します。

そうすると、クリックしたタブにtab-activeのCSSが適用され、タブ自体の切り替えが完了します。

クリックしたタブの中身を切り替える

最初に、タブを切り替えたときと同じ様に$('.box-show').removeClass('box-show');box-showのclassを持つ現在アクティブのタブの中身を非表示にします。

そして、クリックしたタブから$(this).index();でタブのインデックス番号(タブの順番)を取得し、それを$('.tabbox').eq(index).addClass('box-show');.eq(index)を利用することで、タブと同じ順番にあるタブの中身にclassのbox-showを追加します。

ややこしいですかね…。

一言でざっくり説明すると、クリックしたタブが何番目のタブかを取得し、それと同じ順番にあるタブの中身が表示される。

ということです!

まとめ

タブの切り替えは、何かと使いやすく便利なので仕様に合わせてタブを追加したりしていけるようになりましょう。

以上、アサル(ASAL)でした!

他にもこんな記事があります!