簡単！JavaScriptとCSSでタブ切替えメニューを作る方法
JavaScriptとCSSを使って、クリックで切替えられるタブメニュー(iGoogleみたいなやつ）を作って見ました。
いわゆるDHTMLです。
↓のタブ２、タブ３をクリックすると、コンテンツの中身が変わります。
(FireFoxではこのページ上では動きませんが、下記のコードは有効です。
下記ソースをメモ帳にコピペして、拡張子htmlで保存してお使いください。
IE6.0SP2 , FireFox2.0で動作確認しました。
<script>
var collection;
function Obj(objContent,objTab) {
this.content = objContent;
this.tab = objTab;
return this;
}
Obj.prototype = {
appear : function(){
this.content.style.display = "block";
this.tab.className = "selectedtab";
},
dissappear : function() {
this.content.style.display = "none";
this.tab.className = "unselectedtab";
}
};
function init(){
collection = [
new Obj(content1,tab1),
new Obj(content2,tab2),
new Obj(content3,tab3)
];
}
function show(i){
for(var j in collection){
collection[j].dissappear();
}
collection[i].appear();
}
</script>
<style>
.selectedtab { background:#66f; color:white;}
.unselectedtab {}
#content1 { display:block; }
#content2 { display:none; }
#content3 { display:none; }
</style>
<body onload="init()";>
<span id="tab1" class="selectedtab" onclick="show(0);">タブ１</span>
<span id="tab2" class="unselectedtab" onclick="show(1);">タブ２</span>
<span id="tab3" class="unselectedtab" onclick="show(2);">タブ３</span>
<br><br>
<div id="content1">コンテンツＡＡＡＡＡＡＡ</div>
<div id="content2">コンテンツＢＢＢＢＢＢＢ</div>
<div id="content3">コンテンツＣＣＣＣＣＣ</div>
</body>
追記 2008/3/14
もっと簡単なやつを作ってみました。
JavaScriptとCSSで作る超シンプルなタブ切り替えメニュー