Javascriptを使って5分でできるタブ切り替え
タイトルの通り、手軽にタブ切り替えを実装します。 JavascriptとCSSを利用します。
まずは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>
$(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に付加しています。