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が何番目かしらべてそれに対するコンテンツを表示する