iGoogleで使われているアレです。
前回の記事より、さらにわかりやすく書いてみます。
初心者にとっては今回の方がわかりやすいかと思います。
実行サンプルはこちら (別ウィンドウで開きます)
タブの中身をHTMLでこのように書いておき、
前回の記事より、さらにわかりやすく書いてみます。
初心者にとっては今回の方がわかりやすいかと思います。
実行サンプルはこちら (別ウィンドウで開きます)
ソースコード
<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> content1.style.display="none"; ← タブ１の内容を隠す
content2.style.display="block"; ← タブ２の内容を表示
購読する
コメントする