jQueryを使ったタブメニューの第4回目です。（しつこい）

前回はjQuery Cookie プラグインを使ってタブの表示状態を保持するように改修しました。
今回は最初に表示されるタブを選択出来るように改修します。

今回のコードの完成形です。

jQuery Code

(function($) {
	$.fn.tabs = function(options) {
		var o = $.extend({
			targetID: '#tab',
			tabElement: '.tab-list li',
			boxElement: '.tab-box',
			defaultOpenTab: 0
		}, options);
		$(o.tabElement, o.targetID).each(function() {
			var selectedTab = $.cookie(o.targetID + 'selectedTab');
			if (selectedTab) {
				$(o.boxElement, o.targetID).not(':eq(' +selectedTab+')').hide();
				$(o.tabElement, o.targetID).eq(selectedTab).addClass('selected');				
			} else {
				$(o.boxElement, o.targetID).hide().eq(o.defaultOpenTab).show();
				$(o.tabElement, o.targetID).eq(o.defaultOpenTab).addClass('selected');
			}
			$(this).click(function(){
				var tabIndex = $(o.tabElement, o.targetID).index(this);
				$.cookie(o.targetID + 'selectedTab', tabIndex);
				$(o.tabElement, o.targetID).removeClass('selected');
				$(this).addClass('selected');
				$(o.boxElement, o.targetID).hide().eq(tabIndex).addClass('selected').fadeIn();
			});
		});
		return this;
	};
})(jQuery);

前回と違うのは7行目と17、18行目だけです。

何をやっているかと言うと7行目に最初に選択されているタブをオプションとして設定します。0が1番目、1が2番目になります。（初期値は0とします）

17行目は以前のコードでは『1番目の内容以外を非表示』としていたのを『n番目の内容以外を表示』に変更します。
まずは全ての内容を.hide()で非表示にして、.eq(n番目)を.show()で表示します。
18行目は.eq(n番目)のタブ（liタグ）に.addClass()します。

これでn番目のタブが選択された状態を初期値として設定出来るようになります。

GithubデビューしたのでGithubにコードを置いておきました。宜しければご自由にお使いください。

github poundhound/jq.tab