タブ型メニュー javascriptで切り替える

タブ型メニュー javascriptで切り替える

VBではおなじみのTabコントロール。
このタブ型メニューがWEBページで実装できると、ページの表現スタイルが広がります。
当然、ユーザに見やすく、分かりやすく表示できるのでどうにか簡単に実装してみたいものです。
VBではフォームへコピペして後はイベントハンドラに・・・・というスタイルですが、javascriptも考え方はほぼ同じ。

prototype.jsを使えば簡単に実装可能です。

-解説-
タブを切り替える為、クリックイベントを<li>タグに登録しておきます。
後は、デフォルトで表示しないtabは　style="display: none;をインラインで設定します。
何がクリックされたかは、innerHTMLで条件分岐。
hide() show()で要素を隠し*表示を切り替えます。
最期に、クリックされた<li>と他のバックスタイルを切り替えます。

• tab1
• tab2
• tab3

		//ページ数は「Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発 」の参考ページ。
		//いつものように、getElementsByTagNameで要素を取得してイベントハンドラを登録します。
		function pageload(){
	
		var myli=$("ulid").getElementsByTagName("li");
			
		//alert(im[0].src);
		for (var i=0; myli.length > i;i++){
			//p86 Event.observe // イベントハンドラを設定
			Event.observe(myli[i], "click", clickhandler); 
		}

		}
		
		function clickhandler(e){
			//イベント取得
			var it = e.element();
			//alert(it.innerHTML.strip());
			//p49 strip() 文字列 前後スペース削除
			switch(it.innerHTML.strip()){
			
				case "tab1":
					//p125参 hide() show() 表示　非表示
					$("tab2").hide();
					$("tab3").hide();
					$("tab1").show();
					break;
				case "tab2":
					$("tab1").hide();
					$("tab3").hide();
					$("tab2").show();
					break;
				case "tab3":
					$("tab2").hide();
					$("tab1").hide();
					$("tab3").show();
					break;
			}
			//スタイルを設定する
			var myli=$("ulid").getElementsByTagName("li");
			//alert(im[0].src);
			for (var i=0; myli.length > i;i++){
				if (myli[i].innerHTML.strip() == it.innerHTML.strip()){
					it.setStyle('background-color: #FF9900');//p134
				}else{
					myli[i].setStyle('background-color: #ffcc99');//p134
				}
			}
			
			
			
		}