5.2月历
功能：鼠标移到哪个月，哪个月的字色背景色改变，移出恢复原状，并在下方文本框中显示该月计划
事件：onmouseover
属性：className
用到length，this.className,this.index,for语句，innerHTML，数组（注意相互之间不要留空，否则会出错）
css text-align:center
text-indent
去掉li的点list-style:none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<div id="tab" class="calender">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div>
<h2>1月活动</h2>
<p>天气好游玩</p>
</div>
</div>
<script src="js1.js"> </script>
</body>
</html>
////////////////css
.calender{
width:295px;
height:500px;
margin-left:36%;
margin-top: 50px;
background: green;
}
.calender ul{
width:280px;
height:350px;
margin-top:0px;
}
.calender li{
width:60px;
height:60px;
background:#000;
color: pink;
font-size: 11px;
list-style: none;
display: inline-block;
margin-top:20px;
margin-right: 10px;
text-align:center;
}
.calender .active{
background: pink;
color:#000;
}
.calender div{
width:220px;
height:100px;
background: #ccc;
margin-left:40px;
}
/////////////////js
window.onload=function(){
var oDiv=document.getElementById("tab");
var aLi=oDiv.getElementsByTagName("li");
var oTxt=oDiv.getElementsByTagName("div")[0];
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
}
this.className="active";
var aooo=['一月计划','二月活动','三月踏春','四月趣玩','五月节日','66','77',888,];
oTxt.innerHTML="<h2>"+(this.index+1)+'月活动</h2><p>'+aooo[this.index]+'</p>';//注意引号是谁的
};
}
};
