【解説コメあり】難しくない!縦長のWebページをタブ切り替えでスッキリ表示する方法!【Javascript】

【解説コメあり】難しくない!縦長のWebページをタブ切り替えでスッキリ表示する方法!【Javascript】

タブ切り替え

自分は仕事として、フロントエンドエンジニアを7年ほど続けているので、たまにはテクニカル系の記事も書きたいと思います。

Webサイトにコンテンツを並べていくとき、コンテンツの数が多すぎると、めちゃくちゃタテ長のページになってしまったり、さらにこれがスマホサイトだと、とんでもない量のスクロールをしないと下まで見られなかったり、何かと不便だと思います。

そんなピンチの切り抜け方として、コンテンツをタブ切り替えすることによって出し分ける方法があります。
今回は、そのタブ切り替えをJavascript(jQuery)とCSSを使って、カンタンに実装する方法をご紹介します。


タブ切り替えの実装はカンタン!

See the Pen
tab_switch
by TAKASHI (@takashi1107)
on CodePen.

まずはサンプルで作ったタブ切り替えのプログラムを見てください。

Javascriptの記述は、そこまで長くないことが分かります。しかも、大半が解説のためにつけたコメント行なので、実際に必要なプログラム行は10~15行程度で済んでしまいます。

順を追って、さらに解説していきます。

まずは、初期設定から

タブ自体のアクティブ・非アクティブ表示

今現在がどのタブがアクティブになっているのかをわかりやすくするために、アクティブなタブの背景を黒くすると同時に大きさも他のものよりも少し大きくします。
そのために、アクティブなタブのliには.activeクラスを付与します。


    <ul class="tab">
        <li class="active">TAB01</li>
        <li>TAB02</li>
        <li>TAB03</li>
    </ul>

.tab li.active {
background: #000;
padding: 30px 20px;
}

これだけでは、非アクティブのタブをクリックしても、アクティブなタブは切り替わりませんので、ここからJavascriptを使って、アクティブなタブが切り替わるような記述を書いていきます。

// タブをクリックしたときの挙動
$('.tab li').on('click', function() {
// タブの現在表示(アクティブなものの背景を黒にする)を切り替えるため
// いったんすべてのタブから.activeクラスを削除
$('.tab li').removeClass('active');
// クリックされたタブ自身(this)に.activeクラスを付与
$(this).addClass('active');

// =========================================

・・・以下略・・・
});

上記のコメントでも出来る限り解説しましたが、流れを日本語で書くと、

  1. どれか一つのタブがクリックされたら、、、
  2. いったんすべてのタブから.activeクラスを取り除く。するとすべてのタブが、非アクティブになる。
  3. その後クリックされたタブ自身(this)に.activeクラスを付与する。

いったんすべてのタブから.activeクラスを削除しますが、すぐ次の処理で、クリックされたタブ自身に.activeクラスを付与しますので、タイムラグは感じられず、一瞬で切り替わって見えます。

タブの中身(コンテンツ部分)の切り替え

上記でタブ自身の表示切り替えは出来るようになりましたが、あとはそれに連動してコンテンツ部分も切り替わらないといけないので、その部分を解説していきます。

// タブをクリックしたときの挙動
$('.tab li').on('click', function() {

・・・略・・・

// =========================================

// ここからタブの中身(コンテンツ部分)の表示切り替え
// いったんすべての.tab_contentを非表示
$('.tab_content').hide();
// 何番目のタブがクリックされたのかを取得
var tab_no = $('.tab li').index(this);
// クリックされたタブと同じ順番の.tab_contentを表示
$('.tab_content').eq(tab_no).show();
});

こちらの流れも日本語で書くと、

  1. いったんすべてのコンテンツを、hide()処理で非表示にする。
  2. 何番目のタブがクリックされたのかをindexを使って取得し、変数に代入する。
  3. その変数の値をもとに、何番目のコンテンツを表示すればよいかをeqを使って指定する。
  4. eqで指定したコンテンツを、show()を使って表示させる。

流れは、上記のタブのときと一緒で、いったんすべて非表示にして、対象のものだけを表示させるという手法です。

まとめ

プログラミング

今回は久しぶりにWeb系のテクニカルな内容を書きました。いかがでしたでしょうか。

これからは学校でもプログラミング教育が必須となるため、子どもたちに追い越されないように、大人たちもうかうかしていられませんね。

今後、Webサイトを作りたい!Webデザイナー、フロントエンドエンジニアとして働きたいという方は、HTML/CSS/Javascriptはプログラミング言語としてはやさしい部類で、かなりとっかかりやすい言語だと思うので、ぜひ勉強して、ご自分のWebサイトを作ってみてください。


Web開発カテゴリの最新記事