<li onclick="choose(5);">；骑士</li>
</ul>
</div>
<div class="right">
<div id="1"><img src="http://www.xuexi88.com/zhishi/01.png"/></div>
<div id="2" class="ycdiv"><img src="http://www.xuexi88.com/zhishi/02.png"/></div>
<div id="3" class="ycdiv"><img src="http://www.xuexi88.com/zhishi/03.png"/></div>
<div id="4" class="ycdiv"><img src="http://www.xuexi88.com/zhishi/04.png"/></div>
<div id="5" class="ycdiv"><img src="http://www.xuexi88.com/zhishi/05.png"/></div>
</div>
</div>
JS代码如下：
<script type="text/javascript">
for(var i=2;i<=5;i++){
document.getElementById(i).style.display="none"； //让多余的div隐藏
}
function choose(obj){
//隐藏所有的div
for(var i=1;i<=5;i++){
document.getElementById(i).style.display="none"； //让div隐藏
}
document.getElementById(obj).style.display="block"； //给li加样式
var lis = document.getElementsByTagName("li")； //下标从0开始
for(var i=0;i<lis.length;i++){
lis[i].className = "";
}
lis[obj-1].className = "select";
}
</script>
其他的你自己去琢磨下，原理和代码已给到 。
5.html文件,实现上方导航和左侧边栏不变,而右侧边栏信息变换用框架可以做：1.建立主页面，就是你打开就能看到的页面<meta ; charset=gb2312"> 网页标题<frameset rows="16%,84%"border="0"> <frame noresize src="http://www.xuexi88.com/zhishi/top.htm" scrolling="no"> <frameset cols="25%,*" > <frame scrolling="no" noresize src="http://www.xuexi88.com/zhishi/left.htm"> <frame name="rgt" src="http://www.xuexi88.com/zhishi/right.htm"> 这里面top.htm就是上方导航，left.htm就是左侧信息，right.htm就是右侧信息2.建立顶部页面top.htm<meta ; charset=gb2312"> 无标题文档<body> 导航1 导航2
