1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 7 </head> 8 9 <body style="margin:50px 0;"> 10 11 <div style="float:left; margin:0 auto; 800px; padding-left:40px; line-height:25px;" > 12 <ul> 13 <li> 14 <a href="javascript:showDiv('id2');">显示id1的内容</a> 15 </li> 16 <li> 17 <a href="javascript:showDiv('id1');">显示id2的内容</a> 18 </li> 19 <li> 20 <a href="javascript:showDiv('id3');">显示id3的内容</a> 21 </li> 22 </ul> 23 </div> 24 25 <div id="id1" align="center" style="display:" > 26 1111111111111111<a href="javascript:showDiv('id2');">我是id1内容的a链接，点击可回到id2的内容---显示id2内容</a> 27 </div> 28 29 <div id="id2" align="center" style="display:none" > 30 222222222222222222222<a href="javascript:showDiv('id1');">我是id2内容的a链接，点击可回到id1的内容---显示id1内容</a> 31 </div> 32 33 <div id="id" align="center" style="display:none" > 34 333333333333333333我是id3内容 35 </div> 36 <script language="javascript"> 37 function showDiv(objId){ 38 var objDiv=document.getElementById(objId); 39 var objDiv1=document.getElementById("id1"); 40 var objDiv2=document.getElementById("id2"); 41 var objDiv3=document.getElementById("id3"); 42 objDiv1.style.display="none"; 43 objDiv2.style.display="none"; 44 objDiv3.style.display="none"; 45 objDiv.style.display=""; 46 } 47 </script> 48 </body> 49 </html>