<style>
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }

.calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; }

.calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active h2 { }
.calendar .active p { font-weight: bold; }

.calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>

<script>
var aDatas=[
"快过年了，大家可以商量着去哪玩吧～",
"快过年了，大家可以商量着去哪玩吧～222222",
"快过年了，大家可以商量着去哪玩吧～333333",
"快过年了，大家可以商量着去哪玩吧～444444",
"快过年了，大家可以商量着去哪玩吧～555555",
"快过年了，大家可以商量着去哪玩吧～666666",
"快过年了，大家可以商量着去哪玩吧～777777",
"快过年了，大家可以商量着去哪玩吧～888888",
"快过年了，大家可以商量着去哪玩吧～999999",
"快过年了，大家可以商量着去哪玩吧～101010",
"快过年了，大家可以商量着去哪玩吧～111111",
"快过年了，大家可以商量着去哪玩吧～121212"
];

window.onload=function ()
{
var oDiv=document.getElementById(‘tab‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aBtn=oUl.getElementsByTagName(‘li‘);
var oTxt=oDiv.getElementsByTagName(‘div‘)[0];

var i=0;

for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onmouseover=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className=‘‘;
}
this.className=‘active‘;
oTxt.innerHTML=‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+aDatas[this.index]+‘</p>‘;
};
}
};
</script>

简单日历