选显卡切换内容 for以及数组的巧妙运用

来源：互联网发布：知乎专栏怎么写编辑：程序博客网时间：2024/05/17 23:22

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style: none;
}
.box{
width:300px;
height:600px;
position: absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-150px;

}
li{
float:left;
width:96px;
height:96px;
margin:2px;
background:darkslategray;
line-height: 96px;
font-size: 20px;
text-align: center;
}
li.on{
float:left;
width:94px;
height:94px;
margin:2px;
background:#fff;
border:1px solid salmon;
color:darkred;
line-height: 94px;
font-size: 20px;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aLi=document.getElementsByTagName("li");
var txt=document.getElementById("text");
var i=0;
var aData = [
"有一位名叫雅努斯的守护神，生有先后两副脸，一副回顾过去，一副要眺望未来。人们认为选择他的名字作为除旧迎新的第一个月月名，很有意义。英语January",
"人们常用一种牛、草制成的名叫Februa的鞭子，抽打不育的妇女，以求怀孕生子。这一天，人们还要忏悔自己过去一年的罪过，洗刷自己的灵魂，求得神明的饶恕，使自己成为一个贞洁的人。英语2月February，便是由拉丁文Februar-ius（即菲勃卢姆节）演变而来",
"为了纪念战神玛尔斯，人们便把这位战神的拉丁名字作为3月的月名。英语3月March，便是由这位战神的名字演变而来的",
"罗马的4月，正是大地回春.鲜花初绽的美好季节。英文4月April便由拉丁文April（即开花的日子）演变而来",
"为了纪念这位女神，罗马人便用她的名字——拉丁文Maius命名5月，英文5月May便由这位女神的名字演变而来",
"英语6月June便由这位女神的名字演变而来。也有学者认为，Junius可能是个代拉丁家族中一个显赫贵族的姓氏",
"罗马统治者朱里斯*凯撒大帝被刺死后，著名的罗马将军马克*按东尼建议将凯撒大帝诞生的7月",
"原来8月比7月少一天，为了和凯撒平起平坐，他又决定从2月中抽出一天加在8月上。从此，2月便少了一天。英语8月August便由这位皇帝的拉丁语尊号演变而来",
"老历法的7月，正是凯撒大帝改革历法后的9月，拉丁文Septem是“7”月的意思。虽然历法改革了，但人们仍袭用旧名称来称呼9月。",
"来自拉丁文Octo，即“8”的意思。它和上面讲的9月一样，历法改了，称呼仍然沿用未变。",
"于是，11月仍然保留着旧称Novem，即拉丁文“9”的意思。英语11月November便由此演变而来",
"罗马皇帝琉西乌斯要把一年中最后一个月用他情妇的Amagonius的名字来命名，但遭但元老院的反对。于是，12月仍然沿用旧名Decem，即拉丁文“10”的意思。"

];
for( i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){

for(i=0;i<aLi.length;i++){
aLi[i].className="";
}
this.className="on";
txt.innerHTML='<h3>'+'英文中'+(this.index+1)+'月，来源'+'</h3>'+'<p>'+aData[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>

</ul>
<div class="text" id="text">

</div>
</div>
</body>
</html>

0 0