<!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>