JavaScriptとCSSで作る超シンプルなタブ切り替えメニュー

2008/03/14

iGoogleで使われているアレです。
前回の記事より、さらにわかりやすく書いてみます。
初心者にとっては今回の方がわかりやすいかと思います。

ソースコード

<html>

<head>
    <title>超シンプルなタブメニュー</title>
<script>

function show1(){
	content1.style.display="block";
	content2.style.display="none";
	content3.style.display="none";
}

function show2(){
	content1.style.display="none";
	content2.style.display="block";
	content3.style.display="none";
}

function show3(){
	content1.style.display="none";
	content2.style.display="none";
	content3.style.display="block";
}
</script>

<style>
#content1 { display:block; }
#content2 { display:none; }
#content3 { display:none; }
</style>

</head>
<body>

<span onclick="show1();">|タブ１|</span>
<span onclick="show2();">|タブ２|</span>
<span onclick="show3();">|タブ３|</span>
<br>

<div id="content1">コンテンツ１</div>　　　←　タブ１の中身
<div id="content2">コンテンツ２</div>　　　←　タブ２の中身
<div id="content3">コンテンツ３</div>　　　←　タブ３の中身

</body>
</html>

解説

ポイントは、
タブの中身をHTMLでこのように書いておき、

<div id="content1">コンテンツ１</div>
<div id="content2">コンテンツ２</div>

Javascriptで中身の表示/非表示を切り替えます。

  content1.style.display="none";  　←　タブ１の内容を隠す
  content2.style.display="block";　　←　タブ２の内容を表示

カテゴリ: JavaScript