js简易日历中设计的知识点：选项卡切换 数组 innerHTML 连接符
与选项卡的区别：div的个数不同
连接符中需要注意的：(优先级)
"abc"+12+3+"def" 结果：abc123def
"abc"+(12+3)+"def" 结果：abc15def
html代码：
<body>
<div class="contain">
<ul id="tab" class="clearFix">
<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 id="content">
<h2>1月活动</h2>
<p>去滑雪啦，哈哈</p>
</div>
</div>
</body>
css代码：
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<style type="text/css">
.contain{width: 240px;margin: 0 auto;margin-top: 100px;}
#tab{width: 240px;}
#tab li{float: left;width: 40px;height: 60px;line-height:60px;margin: 10px;text-align:center;background: #dbdbdb;cursor: pointer;}
#tab li.active{background: #f60;color: #fff;}
#content{margin: 10px;width: 200px;min-height: 100px;padding:10px;background: #999;}
</style>
js代码：
<script type="text/javascript">
window.onload=function(){
var oTab=document.getElementById("tab");
var aLi=oTab.getElementsByTagName("li");
var oDiv=document.getElementById("content");
var arr=['去滑雪啦，哈哈','222','333','444','555','666','777','888','999','100','101','102'];
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";
oDiv.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
}
}
}
</script>
效果如下：