<!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>無(wú)標(biāo)題文檔</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">七律長(zhǎng)征</li>
<li?name="nav">湘江戰(zhàn)役</li>
<li?name="nav">遵義會(huì)議</li>
<li?name="nav">飛奪瀘定橋</li>
<li?name="nav">強(qiáng)攻臘子口</li><br>
</ul>
</div>
<div?id="wrap">
?<div?name="content"?class="on">內(nèi)容1</div>
?<div?name="content"?class="off">內(nèi)容2</div>
?<div?name="content"?class="off">內(nèi)容3</div>
?<div?name="content"?class="off">內(nèi)容4</div>
?<div?name="content"?class="off">內(nèi)容5</div>
?
</div>
</body>
</html>
2016-11-28
for(var?k=0;k<a.length;k++) { ????b[k].className="off";?//i改成k ????a[k].className="";????//i改成k }