jQueryを使って、タブでコンテンツ内容を切り替えて表示させる方法です。ここでは、複雑なことはしないで、jQueryとCSSを組み合わせて単純にコンテンツを切り替えるだけの動きについて見ていきます。

タブ切り替えの作り方

まずは、HTMLを以下のように組んでおきます。

<ul class="tab">
  <li class="active"><a href="#tab1">tab1</a></li>
  <li><a href="#tab2">tab2</a></li>
  <li><a href="#tab3">tab3</a></li>
</ul>
<div class="tabContents active" id="tab1">
  ～コンテンツ内容～
</div>
<div class="tabContents" id="tab2">
  ～コンテンツ内容～
</div>
<div class="tabContents" id="tab3">
  ～コンテンツ内容～
</div>

続いて、jQueryのコードを記述していきます。

$(function() {
  $(".tab a").click(function() {
    $(this).parent().addClass("active").siblings(".active").removeClass("active");
    var tabContents = $(this).attr("href");
    $(tabContents).addClass("active").siblings(".active").removeClass("active");
    return false;
  });
});

動きとしては、click()イベントを使ってa要素をクリックしたときの処理をします。内容は「.parent()」を使って親要素を取得、つまりa要素の親要素であるli要素を取得しています。そのli要素に対して「.addClass()」で「active」というクラスを付与させます。次の「siblings()」は兄弟要素を取得するもので、つまり「active」というクラスがついたli要素を取得していて、そのli要素に対して「removeClass()」でクラス「active」を取り除いています。

コンテンツボックスに関しても同じような処理をしていて、「.attr()」を使ってhref属性の値を取得して（ここではtab1、tab2、tab3という値）、その値がついている要素に対してクラス「active」を付与したり取り除いたりしています。

最後にCSS側で表示・非表示を制御させます。

.tabContents {
  display: none;
}
.tabContents.active {
  display: block;
}

以上が、jQueryを使ってタブの切り替え表示を作る方法となります。

おすすめの記事