代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-JS简易日历</title>
<style>
div#tab{
width: 400px;
height: 550px;
margin: 0 auto;
background-color: #cccccc;
}
.text{
width: 400px;
height: 150px;
border: 1px solid #9a9a9a;
box-sizing: border-box;
background-color: #ffce1d;
margin: 0 auto;
text-align: center;
float: left;
}
ul li{
font-family:"楷体";
font-size: 15px;
list-style: none;
width: 100px;
height: 100px;
border: 1px solid #f76222;
box-sizing: border-box;
background-color: rgba(28, 28, 28, 0.78);
text-align: center;
float: left;;
}
</style>
<script>
window.onload=function ()
{
var arr=['快过年了，还有什么要准备的呢？', '二月春风似捡到，出去春游吧！', '三月桃花开得正艳，来赏赏花吧'];
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 f=0;f<aLi.length;f++)
{
aLi[i].className='';//清空所有的class
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
};
}
}
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>一月</h2><p>January</p></li>
<li><h2>二月</h2><p>February</p></li>
<li><h2>三月</h2><p>March</p></li>
<li><h2>四月</h2><p>April</p></li>
<li><h2>五月</h2><p>May</p></li>
<li><h2>六月</h2><p>June</p></li>
<li><h2>七月</h2><p>July</p></li>
<li><h2>八月</h2><p>August</p></li>
<li><h2>九月</h2><p>September</p></li>
<li><h2>十月</h2><p>October</p></li>
<li><h2>十一月</h2><p>November</p></li>
<li><h2>十二月</h2><p>December</p></li>
</ul>
<div class="text">
<h2>一月活动</h2>
<p>快过年了，还月什么要准备的呢？</p>
</div>
</div>
</body>
</html>
