読者です 読者をやめる 読者になる 読者になる

Javascriptを使って5分でできるタブ切り替え

タイトルの通り、手軽にタブ切り替えを実装します。 JavascriptCSSを利用します。

まずはHTML

<!-- トグルボタン -->
<div id="tab">
  <div>
    <input type="radio" class="selected" checked>
    <div>Tab A</div>
  </div>
  <div>
    <input type="radio">
    <div>Tab B</div>
  </div>
</div>

<div class="content_wrap">
コンテンツ1
</div>
<div class="cotent_wrap nodis">
コンテンツ2
</div>

次にJavaScript

$(function() {
    $("#tab input").click(function() {
        var num = $("#tab input").index(this);
        $(".content_wrap").addClass('nodisp');
        $(".content_wrap").eq(num).removeClass('nodisp');
        $("#tab input").removeClass('selected');
        $(this).addClass('selected')
    });
});

ラジオボタンが押されると、nodispクラスが切り替わります。

最後にCSS

.selected {
  background: yellow;
}

.nodisp {
  display: none;
}

.selectedでは、選択されているタブの背景色をyellowに指定しています。 .nodispを非選択状態のcontent_wrapperに付加しています。