mousse design lab. ムースデザインラボ

シンプルなタブ切り替え


javascriptを使ってのタブ切り替えはよく使いますよね。
色んなやり方がありますが、出来るだけシンプルに整理してみました。
まずはhtml

<div>
<ul class="tab">
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div>Tab1の内容</div>
<div>Tab2の内容</div>
</div>

次にjs

<script>
<script src="http://code.jquery.com/jquery.min.js"></script>
$(function () {
    $(".tab").each(function () {
        $(this).nextAll(":not(:first)").hide();
        $(this).children(":first").addClass("active");
    });
    $(".tab > li").click(function () {
        var ul = $(this).parent();
        var index = ul.children().index(this);
        ul.children().removeClass("active");
        ul.children(":eq(" + index + ")").addClass("active");
        ul.nextAll().hide();
        ul.nextAll(":eq(" + index + ")").show();
    });
});
</script>

クラスにしておくことで何度も使えます。
IDを付けてやればCSSでデザインを変えられますね。

CSSは最低限これだけです。

.tab li{
display:inline;
}

.tab .select{
background:#ccc;
}

なんてシンプル!
こちらの記事を参考にさせていただきました!
http://yusainotes.webcrow.jp/javascript/jquery/tab.html

Top