Category: javascript

その場限りのページで時々使うタブ切替のサンプルコード。

HTML

<ul id="tabs">
    <li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
    <li>タブB</li>
</ul>

<section class="content">
    <!-- タブAの内容 (初期状態では表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブBの内容 (初期状態では非表示 -->
</section>

javascript

var $tabs = $("#tabs li");
$tabs.click(function(){
    $(".content").hide().eq($tabs.removeClass("on").index(this)).show();
    $(this).addClass("on");
});

タブと内容はHTMLソース上での並び順を合わせる必要があります。
2番目の#tabs li が選択された時に2番目の.content が表示される仕組みです。

タブの増減はhtml側の編集のみ。

<ul id="tabs">
    <li class="on">タブA</li> <!-- 初期状態で開いているタブ -->
    <li>タブB</li>
    <li>タブC</li>
</ul>

<section class="content">
    <!-- タブAの内容 (初期状態では表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブBの内容 (初期状態では非表示) -->
</section>

<section class="content" style="display: none;">
    <!-- タブCの内容 (初期状態では非表示) -->
</section>

こうするとみっつになります。