<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran
<!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"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>test</title><style type="text/css">#list1 a:hover{color:#CC0033;}#list2 a:hover{color:#CC0033;}/*#list2 a:active{color:#0000FF;}*/#left,#right{float:left;color:#FF33CC;}#right{padding:10px;margin-top:40px;}body{font-size:28px;line-height:45px;}a{text-decoration:none;color:#FF0000;} /*去除锚链接的下划线*/li{list-style:none; }</style><body><div id="left"><ul><li id="list1"><a href="#" onclick="document.getElementById('text1').style.display='block';document.getElementById('text2').style.display='none'">第一节</a> </li><li id="list2"><a href="#" onclick="document.getElementById('text2').style.display='block';document.getElementById('text1').style.display='none'">第二节</a></li></ul></div><div id="right" style="float:left;width:300px;height:500px;border:2px;background:#66FF99;"><div id="text1" style="float:left;border:2px;width:200px;height:200px;display:none">gaga</div><div id="text2" style="float:left;border:2px;width:200px;height:200px;display:none">hehe</div></div></body></html>效果如下图：
