/*
Create A Tabbed Interface Using jQuery
http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/
*/

$(function(){
	/* 例1 */
	
	// コンテンツを格納
	var tabContainers = $('#exp1 > div');

	$('#exp1 ul.tabnav a').click(function () {
        // すべてのタブコンテンツを非表示にし、
        // クリックされたハッシュをIDとするタブコンテンツだけ表示
	    tabContainers.hide().filter(this.hash).show();
	    
	    // 選択中のタブをハイライト表示
	    $('#exp1 ul.tabnav a').removeClass('selected');
	    $(this).addClass('selected');
	    
	    return false;
	}).filter(':first').click(); // 最初のタブコンテンツだけ表示

	/* 例2 */

	// パス名格納用
	var tabs = [];
	// ハッシュ格納用
    var tabContainers2 = [];
    $('#exp2 ul.tabnav a').each(function () {
      // 現在のウィンドウのパス名を取得して配列に格納
//       if (this.pathname == window.location.pathname) {
            tabs.push(this);
            // ハッシュを取得して配列に格納
            tabContainers2.push($(this.hash).get(0));
//       }
    });
    $(tabs).click(function () {
        // すべてのタブコンテンツを非表示に
        // クリックされたハッシュをIDとするタブコンテンツだけ表示
        $(tabContainers2).hide().filter(this.hash).show();

	    // 選択中のタブをハイライト表示
        $(tabs).removeClass('selected');
        $(this).addClass('selected');

        return false;
	}).filter(':first').click(); // 最初のタブコンテンツだけ表示

});