<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历</title>
<style type="text/css">
*{margin:0;padding:0;}
#contain{max-width:350px;border: 2px solid red;margin:0 auto;}
ul{padding-bottom:10px;}
ul,li{list-style-type: none;}
ul li{width: 100px;height: 100px;text-align: center;line-height: 100px;color:#fff;float: left;border:1px solid red;background: #6F6363;margin-left:10px;margin-top:10px;display:block;}
ul:after{content:"";display:block;height:0;clear:both;}
.active{background: #ccc;}
.text{min-height:100px;border:2px solid red;margin:0 auto;}
</style>
<script type="text/javascript">
var aDaras=[//数组用来存放数据
'快过年了，去哪玩啊。',
'第二个月了，假期好短',
'第三个月。。。',
'第四个月。。。',
'第五个月。。。',
'第六个月。。。',
'第七个月。。。',
'第八个月。。。',
'第九个月。。。',
'第十个月。。。',
'第十一个月。。。',
'第十二个月。。。',
];
window.onload=function(){
var aLi=document.getElementsByTagName('li');
var oTxt=document.getElementById('contain').getElementsByTagName('div')[0];
var i=0;
for(i=0;i<aLi.length;i++){
aLi[i].index=i;//给i加上一个索引值
aLi[i].onmouseover=function(){
for(i=0;i<aLi.length;i++){
aLi[i].className='';
}
this.className='active';
oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+aDaras[this.index]+'</p>';//在div中加入内容
}
}
}
</script>
</head>
<body>
<div id="contain">
<ul>
<li class="active"><h2>1</h2></li>
<li><h2>2</h2></li>
<li><h2>3</h2></li>
<li><h2>4</h2></li>
<li><h2>5</h2></li>
<li><h2>6</h2></li>
<li><h2>7</h2></li>
<li><h2>8</h2></li>
<li><h2>9</h2></li>
<li><h2>10</h2></li>
<li><h2>11</h2></li>
<li><h2>12</h2></li>
</ul>
<div class="text">
<h2>1月活动</h2>
<p>快过年了，去哪玩啊。</p>
</div>
</div>
</body>
</html>
查看范例
