<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax的Hello页面</title><script language="javascript">
 function ShowHide1()
 {
/*   document.getElementById('img1').style.display = "block";   //显示
   document.getElementById('img2').style.display = "none";   //隐藏
   document.getElementById('img3').style.display = "none";   //隐藏*/  
document.write("<div style=\"top:0;left:0;position:absolute;height:28;width:219;\"><input   type=image  id=1  onclick=ShowHide1()   src=prd_btn01.gif align=\"top\"></div><div style=\"top:28px; left:0px; position:absolute; height:145; width:219;\"><img src=\"prd_img.gif\" align=\"top\" id=\"img1\" /></div><div style=\"top:173px; left:0px; position:absolute; height:29; width:219;\"><input   type=image   src=prd_btn02.gif  id=2  onclick=ShowHide2()></div><div style=\"top:202px; left:0px; position:absolute; height:27; width:219;\"><input   type=image   src=prd_btn03.gif  id=3  onclick=ShowHide3() /></div>");   
 }
  function ShowHide2()
 {
/*   document.getElementById('img2').style.display = "block";   //显示
   document.getElementById('img1').style.display = "none";   //隐藏
   document.getElementById('img3').style.display = "none";   //隐藏*/  
document.write("<div style=\"top:0;left:0;position:absolute;height:28;width:219;\"><input   type=image  id=1  onclick=ShowHide1()   src=prd_btn01.gif align=\"top\"></div><div style=\"top:28px; left:0px; position:absolute; height:29; width:219;\"><input   type=image   src=prd_btn02.gif  id=2 onclick=ShowHide2()></div><div style=\"top:57px; left:0px; position:absolute; height:145; width:219;\"><img src=\"prd_img.gif\" align=\"top\" id=\"img2\" /></div><div style=\"top:202px; left:0px; position:absolute; height:27; width:219;\"><input   type=image   src=prd_btn03.gif  id=3  onclick=ShowHide3() /></div>");  
 }
  function ShowHide3()
 {
/*   document.getElementById('img3').style.display = "block";   //显示
   document.getElementById('img1').style.display = "none";   //隐藏
   document.getElementById('img2').style.display = "none";   //隐藏*/
document.write("<div style=\"top:0;left:0;position:absolute;height:28;width:219;\"><input   type=image  id=1  onclick=ShowHide1()   src=prd_btn01.gif align=\"top\"></div><div style=\"top:28px; left:0px; position:absolute; height:29; width:219;\"><input   type=image   src=prd_btn02.gif  id=2  onclick=ShowHide2()></div><div style=\"top:57px; left:0px; position:absolute; height:27; width:219;\"><input   type=image   src=prd_btn03.gif  id=3  onclick=ShowHide3() /></div><div style=\"top:84px; left:0px; position:absolute; height:145; width:219;\"><img src=\"prd_img.gif\" align=\"top\" id=\"img3\" /></div>");   } 
</script>
</head><body>
<div style="top:0;left:0;position:absolute;height:28;width:219;">
 <input   type=image  onclick=ShowHide1()   src=prd_btn01.gif align="top">
</div>
<div style="top:28px; left:0px; position:absolute; height:145; width:219;"><img src="prd_img.gif" align="top" id="img1" /></div>
<div style="top:173px; left:0px; position:absolute; height:29; width:219;">
 <input   type=image   src=prd_btn02.gif  onclick=ShowHide2()>
</div>
<div style="top:202px; left:0px; position:absolute; height:27; width:219;">
 <input   type=image   src=prd_btn03.gif  onclick=ShowHide3()>
</div>
</body>
</html>

解决方案 »

  1.   

    换成document.body.innerHTML+=("<div style=\"top:0;left:0;position:absolute;height:28;width:219;\"><input   type=image  id=1  onclick=ShowHide1()   src=prd_btn01.gif align=\"top\"></div><div style=\"top:28px; left:0px; position:absolute; height:29; width:219;\"><input   type=image   src=prd_btn02.gif  id=2  onclick=ShowHide2()></div><div style=\"top:57px; left:0px; position:absolute; height:27; width:219;\"><input   type=image   src=prd_btn03.gif  id=3  onclick=ShowHide3() /></div><div style=\"top:84px; left:0px; position:absolute; height:145; width:219;\"><img src=\"prd_img.gif\" align=\"top\" id=\"img3\" /></div>");