真的是非常简易了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
margin: 50px auto;
400px;
background: #ccc;overflow: hidden;
padding: 30px;
}
ul{
overflow: hidden;
}
li{
list-style: none;float: left;
80px;margin: 10px;
background: #666;height: 80px;
text-align: center;line-height: 80px;
font-size: 26px;color: #fff;
}
#txt{
height: 60px; 300px;background: #fff;
}
.active{
background: #ff0;color: #f00;
}
</style>
</head>
<body>
<div id="calendar">
<ul>
<li class="active">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="txt">
</div>
</div>
<script type="text/javascript">
//简易年历
var data = ['元旦1月1日','2月14日情人节','3月3日全国爱耳日', '4月1日愚人节',
'5月1日国际劳动节','6月1日 国际儿童节', '7月1日中国共产党诞生日','8月1日中国人民解放军建军节','9月10日中国教师节', '10月1日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日' ];
var oLi = document.getElementsByTagName("li");
var oTxt = document.getElementById("txt");
oTxt.innerHTML = data[0];
for(var i = 0;i < oLi.length;i++){ //月份遍历
oLi[i].index = i;
oLi[i].onclick = function(){ //鼠标点击事件
for(var j = 0;j < oLi.length;j++){
oLi[j].className = "";
}
this.className = "active";
oTxt.innerHTML = data[this.index];
}
}
</script>
</body>
</html>
(效果图不会放图...)