次のようにコードコードをコピーします。
<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<メタhttp-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Title>タブはIMG画像変換を実装しています</title>
<style type = "text/css">
#main {height：420pts：400px;}
＃頭 {{
幅：400px;
高さ：52px;
ポーズ：絶対;
左：10px;
トップ：-12px;
背景色：緑;
}
#head li {float：width：85px;}
＃コンテンツ {
幅：400px;
高さ：350px;
バックグラウンドカラー：＃fc6;
テキストアライグ：センター;
ポーズ：絶対;
トップ：36px;
左：10px;
}
</style>
</head>
<body>
<div id = "main">
<div id = "head">
<ul>
<li id = "tab1" onmouseover = "show（1）" style = "background-color：#fff"> picture 1 </li>
<li id = "tab2" onmouseover = "show（2）">写真2 </li>
<li id = "tab3" onmouseover = "show（3）"> picture 3 </li>
<li id = "tab4" onmouseover = "show（4）">写真4 </li>
</ul>
</div>
<div id = "content">
<p id = "p1"> <img src = "picture 0"/> </p>
<p id = "p2" style = "display：none;"> <img src = "picture 1"> </p>
<p id = "p3" style = "display：none;"> <img src = "picture 2"/> </p>
<p id = "p4" style = "display：none;"> <img src = "picture 3"/> </p>
</div>
</div>
</body>
<スクリプト>
関数show（n）{
for（var i = 1; i <= 4; i ++）{
document.getElementById（ "tab"+i）.style.backgroundcolor = 'green';
document.getElementById（ "p"+i）.style.display = 'none';
//コンテンツの隠されたコンテンツの制御を表示する、非表示にする必要があります
}
document.getElementById（ "tab"+n）.style.backgroundcolor = 'white';
document.getElementById（ "P"+n）.style.display = 'block';
//ブロックの場合、非表示を表示できます
}
</script>
</html>