jQuery tab切りかえ

tab切りかえ

jsめも
each使ったらthisもつかう

js

$(function(){
    $("#price-tab li").click(function(){

        var tab_img = $(this).parent().find("img");
        var _this_img = $(this).find("img");
            // tab_img.attr("src",tab_img.attr("src").replace("-on.", "-off."));
        tab_img.each(function(){
            $(this).attr("src", $(this).attr("src").replace("-on.", "-off."));
        });
            _this_img.attr("src", _this_img.attr("src").replace("-off.", "-on."));

        var index = $(this).index();
        $("#price-list li").hide();
        $("#price-list li").eq(index).show();
    });
});

タブ用とコンテンツ用のul,liを用意
相対するタブとコンテンツが同じ順に並ぶようにhtmlをかく

tab押したら、tabのli全部非アクティブの画像に切り替える
そのあと押したとこだけアクティブに

コンテンツも一度全部非表示にする
タブのliが何番目かしらべてそれに対するコンテンツを表示する