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