单一静态网页如何实现点击左边菜单在右边展现内容

最新推荐文章于 2024-10-14 23:40:45 发布

weixin_30888027

最新推荐文章于 2024-10-14 23:40:45 发布

阅读量509

点赞数

文章标签： python xhtml

原文链接：http://www.cnblogs.com/shark1100913/p/5470821.html

版权

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