jQueryを使ってタブ切り替えメニューを実装する方法

jQueryを使ってタブ切り替えメニューを実装する方法

jQueryを使ってタブ切り替えメニューを実装する方法

jQueryでタブ切り替え型のメニューを作成する方法を紹介いたします。

簡単なデモページを作成しましたので、動きについては以下をご参照ください。

デモページを見る

タブの中には、画像やリンク、テーブルなどを入れることが可能です。

ステップ1. HTMLのマークアップ

まずはタブメニューと中身をマークアップしていきます。HTMLは以下のように記述しましょう。

<div id="tabs">
  <ul>
    <li><a href="#panel1">タブ1</a></li>
    <li><a href="#panel2">タブ2</a></li>
    <li><a href="#panel3">タブ3</a></li>
    <li><a href="#panel4">タブ4</a></li>
    <li><a href="#panel5">タブ5</a></li>
  </ul>
 
  <div id="panel1" class="panel">
    タブ1の内容
  </div>
  <div id="panel2" class="panel">
    タブ2の内容
  </div>
  <div id="panel3" class="panel">
    タブ3の内容
  </div>
  <div id="panel4" class="panel">
    タブ4の内容
  </div>
  <div id="panel5" class="panel">
    タブ5の内容
  </div>
</div>

タブメニュー全体を#tabsで包括し、各タブの内容に.panelを付与します。

また、タブの中身には、タブメニューに対応するIDを付与します。上記の場合、タブ1は#panel1、タブ2は#panel2というようにしているので、タブ1をクリックすると#panel1の内容が表示されます。

ステップ2. jQueryの実装

続いて、jQueryを実装します。記述する箇所は</body>の直前で大丈夫です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  $('#tabs a[href^="#panel"]').click(function(){
    $('#tabs .panel').hide();
    $(this.hash).fadeIn();
    return false;
  });
  $('#tabs a[href^="#panel"]:eq(0)').trigger('click');
});
</script>

まず最初にjQueryをロードしています。ファイルをダウンロードして、サーバー上に設置してもOKです。

$(“#tabs .panel”).hide();で、表示しているタブの中身以外は非表示にしています。

ステップ3. CSSの調整

最後にCSSで見た目を整えて完成です。

#tabs {
  overflow: hidden;
  margin: 15px auto 0;
  width: 730px;
}
#tabs ul {
  overflow: hidden;
  list-style: none;
  border-bottom: 1px solid #eee;
  margin: 0;
}
#tabs li {
  background: #ddd;
  padding: 8px 43px;
  float:left;
  margin-right: 5px;
  cursor:pointer;
}
#tabs li a {
  color: #373737;
  font-weight: bold;
  text-decoration: none;
}
#tabs .panel {
  background: #EFEFEF;
  padding: 10px;
  display: none;
  overflow: hidden;
}

デモページでは、上記のようにしています。お好みで変更しましょう。

タブにa要素を使いたくない場合

同じページ内で内部リンクのスムーススクロールを実装している場合は、タブをクリックした時にスムーススクロールが発動してタブがうまく動いてくれません。

そういった場合は、タブにa要素を使わずにタブを実装する方法をお試しください。a要素を使わずに実装する場合は、下記のようにします。

HTMLは上述した内容とほぼ同じです。タブのa要素を除去して、最初に表示されるタブとパネルにクラスを付与しています。

<div id="tabs">
  <ul>
    <li class="is-active">タブ1</li>
    <li>タブ2</li>
    <li>タブ3</li>
    <li>タブ4</li>
    <li>タブ5</li>
  </ul>
 
  <div class="panel is-show">
    タブ1の内容
  </div>
  <div class="panel">
    タブ2の内容
  </div>
  <div class="panel">
    タブ3の内容
  </div>
  <div class="panel">
    タブ4の内容
  </div>
  <div class="panel">
    タブ5の内容
  </div>
</div>

CSSで.is-showが付いていない.panelを非表示にします。

#tabs .panel {
  display: none;
}
#tabs .panel.is-show {
  display: block;
}

jQueryは以下のように記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  $('#tabs li').click(function() {
    var index = $('#tabs li').index(this); //何番目のタブがクリックされたかを格納
    $('#tabs li').removeClass('is-active');
    $(this).addClass('is-active');
    $('#tabs .panel').removeClass('is-show').eq(index).addClass('is-show'); //○番目のコンテンツのみを表示
  });
});
</script>

クリックされたタブと同じ順番の.panelを表示させるようにすることで、タブ切り替えを実現しています。クリックされたタブには.is-activeが追加されるので、あとはCSSで見た目を変化させてあげればOKです。

あとがき

どちらの方法も結構簡単に実装できますね。タブで切り替えるメニューを導入する際は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です