<!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>
#divHead
{
width:790px;
height:430px;
text-align:center;
background-color:#000000;
color:#FFFFFF;
}
#divHead ul li
{
margin:2px 2px;
display:block;
width:220px;
height:100px;
float:left;
border:2px solid white;
}
#bottom
{
margin:0px 0px 0px 0px;
width:790px;
height:180px;
border:0px solid white;
background-color:#000000;
color:white;
text-align:center;}
.active
{
color:red;
}
</style>
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById("divHead");
var liCh=oDiv.getElementsByTagName("li");
var innerDiv=document.getElementById("bottom");
var arr=["1月,让自己取得好成绩","2月,保持良好的情绪","3月,开心每一天","4月,活力起来","5月,加油","6月,倘不奋发，惟有失败，顾影自怜","7月,以情恕人，以理律已","8月,happiness","9月,科学和艺术是一枚硬币的两面","10月,漂亮","11月,拼搏的汗水放射着事业的光芒，奋斗的年华里洋溢着人生的欢乐。 ","12月书籍是朋友，虽然没有热情，但是非常忠实,"]
for(var i=0;i<liCh.length;i++)
{
liCh[i].index=i;
liCh[i].οnmοuseοver=function()
{
for(var j=0;j<liCh.length;j++)
{
liCh[j].className="";
}
this.className="active";
innerDiv.innerHTML="<h2>"+(this.index+1)+"月活动</h2>"+arr[(this.index)];
}
}
}
</script>
</head>
<body>
<div id="divHead">
<ul>
<li class="active"><h2>1</h2>January</li>
<li><h2>2</h2>February</li>
<li><h2>3</h2>March</li>
<li><h2>4</h2>April</li>
<li><h2>5</h2>May</li>
<li><h2>6</h2>June</li>
<li><h2>7</h2>July</li>
<li><h2>8</h2>August</li>
<li><h2>9</h2>September</li>
<li><h2>10</h2>October</li>
<li><h2>11</h2>November</li>
<li><h2>12</h2>December</li>
</ul>
</div>
<div id="bottom">
</div>
</body>
</html>
3万+
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
