© code www. All rights reserved.

  • 公開日：
  • 更新日：

JS：タブを実装する方法（jQuery）

JavaScriptを使ってシンプルで効果的なタブを実装する方法を解説します。実際のコード例を交えながら、タブの基本的な作り方を見ていきましょう。
タブのボタン部分にIDを付与し、そのIDと適合したコンテンツが表示されるという仕組みです。

HTML

<div class="c-tab" data-tab>
  <ul class="c-tab__nav">
    <li class="c-tab__navItem active"><a class="c-tab__navLink" href="#" data-tab-nav="1">タブ1</a></li>
    <li class="c-tab__navItem"><a class="c-tab__navLink" href="#" data-tab-nav="2">タブ2</a></li>
  </ul>
  <div class="c-tab__content">
    <div class="c-tab__contentSection active" data-tab-content="1">
      <p>ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテ</p>
    </div>
    <div class="c-tab__contentSection" data-tab-content="2">
      <p>スラッシュ顔文字を使ったデザインに、一般的な名称は定まっていませんが、デザインの特徴や使われ方によって、様々な呼び方や表現が考えられます。デザインの意図やターゲットに合わせて、適切な名称をつけることが大切です。スラッシュ顔文字を使ったデザインに、一般的な名称は定まっていませんが、デザインの特徴や使われ方によって、様々な呼び方や表現が考えられます。デザインの意図やターゲットに合わせて、適切な名称をつけることが大切です。</p>
    </div>
  </div>
</div>

CSS

.c-tab {
  margin-bottom: 40px;
}
.c-tab__nav {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.c-tab__nav::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #7A9EA0;
}
.c-tab__navItem {
  text-align: center;
  flex-basis: 40%;
  font-size: 16px;
  font-weight: bold;
  border: #7A9EA0 solid 3px;
  border-radius: 0;
  margin-right: -3px;
  background-color: #DDF5F6;
}
.c-tab__navItem a {
  color: #749495;
}
.c-tab__navItem:first-child {
  border-radius: 20px 0 0 0;
}
.c-tab__navItem:last-child {
  border-radius: 0 20px 0 0;
  margin-right: 0;
}
.c-tab__navItem.active {
  background-color: #fff;
  border-bottom: 0;
}
.c-tab__navItem.active a {
  color: #000;
}
.c-tab__navLink {
  position: relative;
  display: block;
  padding: 15px 0;
}
.c-tab__contentSection {
  display: none;
}
.c-tab__contentSection.active {
  display: block;
}
@media screen and (max-width: 960px) {
  .c-tab__nav {
    margin-bottom: 30px;
  }
  .c-tab__navLink {
    padding: 20px 0;
  }
  .c-tab__navLink {
    transition: color 0.3s;
  }
  .c-tab__navLink:hover {
    color: #3F50AA;
  }
}

JavaScript（jQuery）

$(function(){
  let $tab = $('[data-tab]');
  if($tab.length) {

    $tab.each(function(i,elem){
      $(elem).find('[data-tab-nav]').on('click', function(e){
        let num = $(this).data('tab-nav');
        e.preventDefault();

        $(elem).find('[data-tab-nav]').parent().removeClass('active');
        $(this).parent().addClass('active');

        $(elem).find('[data-tab-content]').hide();
        $(elem).find(`[data-tab-content="${num}"]`).fadeIn(300);
      });
    });
  };
});
デモを見る

執筆者

astroboy

Webデザイナー&コーダー。HTML/CSS/JavaScript/Vue.js/WebGL/ECサイトなど手広くWeb制作に従事する。現在は東京で活動中。

この記事を気に入りましたら、ぜひ「いいね」「シェア」をお願いします。

関連タグ