<!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=utf-8" />
<title>无标题文档</title>
<style>
img{position:relative; left:90px;}
li{
float: left;
list-style-type: none;
margin-right: 1px;
margin-bottom:1px;
background-color: #066;
font-size: larger;
display:block;
width:100px;
height:37px;
padding-left:0;
}
.clicked{
background-color: #6A861F;
}
.on{display:block;}
.off{display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
var a=document.getElementsByName("nav");
var b=document.getElementsByName("content");
for(var i=0;i<a.length;i++)
{
a[i].index=i;
a[i].onclick=function()
{
for(var k=0;k<a.length;k++)
{
b[i].className="off";
a[i].className="";
}
b[this.index].className="on";
this.className="clicked";
}
}
}
</script>
</head>
<body>
<div id="nav">
<ul>
<li name="nav">七律长征</li>
<li name="nav">湘江战役</li>
<li name="nav">遵义会议</li>
<li name="nav">飞夺泸定桥</li>
<li name="nav">强攻腊子口</li><br>
</ul>
</div>
<div id="wrap">
<div name="content" class="on">内容1</div>
<div name="content" class="off">内容2</div>
<div name="content" class="off">内容3</div>
<div name="content" class="off">内容4</div>
<div name="content" class="off">内容5</div>
</div>
</body>
</html>
