<div class="codetitle"> <span><a style="CURSOR: pointer" data="89722" class="copybut" id="copybut89722" onclick="doCopy('code89722')"><u>复制代</u></a></span> 代码如下:</div> <div class="codebody" id="code89722"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>選択画像画像の変更</title> <br><style type="text/css"> <br>#main{ 高さ:420px; width:400px;} <br>#head{ <br>width:400px; <br>高さ:52ピクセル; <br>位置:絶対; <br>左:10px; <br>トップ: -12px; <br>背景色:緑; <br>} <br>#head li{ float:left;リストスタイル:なし; width:85px;} <br>#content{ <br>width:400px; <br>高さ:350ピクセル; <br>背景色:#FC6; <br>text-align:center; <br>位置:絶対; <br>トップ:36px; <br>左: 10px; <br>} <br></style> <br></head> <br><br> <br><div id="main"> <br><div id="head"> <br><ul> <br><li id="tab1" onmouseover="show(1)" style="background-color:#FFF">图片一</li> <br><li id="tab2" onmouseover="show(2)">写真二</li> <br><li id="tab3" onmouseover="show(3)">写真三</li> <br><li id="tab4" onmouseover="show(4)">画像四</li> <br> </ul> <br> </div> <br><div id="コンテンツ"> <br><p id="p1"><img src="図片0"/></p> <br><p id="p2" style="display:none;"><img src=“图片1”></p> <br><p id="p3" style="display:none;"><img src="图片2" height="320px;"/></p> <br><p id="p4" style="display:none;"><img src="图片3"/></p> <br> <br> <br></body> <br> <br>function show(n){ <br>for(var i=1;i<=4;i ){ <BR>document.getElementById("tab" i).style.backgroundColor='green'; <BR>document.getElementById("p" i).style.display='none'; <BR>//表示内容の有無の制御、なしである場合、<BR>} <BR>document.getElementById("tab" n).style.backgroundColor='white'; <BR>document.getElementById("p" n).style.display='block'; <BR>//当ブロック時、隐藏の即時表示 <BR>} <BR></script> <br></html> <br>
