基本：选项卡
this 当前发生事件的元素
原理：先全部隐藏，然后将当前的显示出来
使用innerHTML：标签中间的HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易日历</title>
<style>
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{zoom:1}
ul{
width:200px;
}
ul li{
list-style-type:none;
width:50px;
border:1px solid #000000;
float:left;
text-align:center;
margin:5px;
}
.active{
background:#7A7272;
}
.text{
margin-left:50px;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById(‘tab‘);
var oLi=document.getElementsByTagName(‘li‘);
var oTxt=oDiv.getElementsByTagName(‘div‘)[0];
var arr=[
‘一月，新年的开始！‘,
‘二月啊，加油加油‘,
‘三月啊，fighting‘,
‘四月啊，春天来了‘,
‘五月啊，劳动节‘,
‘六月啊，儿童节‘,
‘七月啊，夏天来了‘,
‘八月啊，热热热‘,
‘九月啊，秋游‘,
‘十月啊，生日‘,
‘十一月，加油，就剩一个月，今年就结束了‘,
‘十二月，总结这一年‘
];
var i=0;
for(i=0;i<oLi.length;i++)
{
oLi[i].index=i;
oLi[i].onmouseover=function()
{
for(i=0;i<oLi.length;i++)
{
oLi[i].className=‘‘;
}
this.className=‘active‘;
oTxt.innerHTML=‘<h2>‘+(this.index+1)+‘月活动</h2><p>‘+arr[this.index]+‘</p>‘;
};
}
};
</script>
</head>
<body>
<div type="text" id="tab" class="calender">
<ul class="clearfloat">
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FEB</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 class="text"><h2>1月活动</h2><p>一月啊</p></div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/lyne11/p/6508981.html