<!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>无标题文档</title> <style> #main{ width:980px; height:auto!important; overflow:hidden; visibility:visible; margin:auto; margin-top:0px;} #left{ width:378px; float:left; border:#CCCCCC 1px solid;} #right{ width:598px; float:left; border:#CCCCCC 1px solid; height:300px; padding-top:40px;} </style> <script> function testdata(obj){ document.getElementById('right').innerHTML=obj; } </script> </head> <body> <div id="main"> <!--左侧栏目--> <div id="left"> <ul> <li onclick="testdata('栏目一的内容')">栏目一</li> <li onclick="testdata('栏目二的内容')">栏目二</li> <li onclick="testdata('栏目三的内容')">栏目三</li> <li onclick="testdata('栏目四的内容')">栏目四</li> <li onclick="testdata('栏目五的内容')">栏目五</li> </ul> </div> <!--右侧内容--> <div id="right">这里将显示左侧栏目的内容</div> </div> </body> </html> 追问： 如果左目录有图片， 右边显示的内容也有图片呢？》？？ 图片可以外部调入 追答： 图片可以写在js的赋值方法里啊 <li onclick="testdata('栏目一的内容<img src=图片路径 width=100 height=100 />')">栏目一</li>