js 简易年历

html部分

<div class='calendar'>
<div class="tabBox" id='nav' >
<ul>
<li><h3>1</h3><p>jan</p></li>
<li><h3>2</h3><p>jan</p></li>
<li><h3>3</h3><p>jan</p></li>
<li><h3>4</h3><p>jan</p></li>
<li><h3>5</h3><p>jan</p></li>
<li><h3>6</h3><p>jan</p></li>
<li><h3>7</h3><p>jan</p></li>
<li><h3>8</h3><p>jan</p></li>
<li><h3>9</h3><p>jan</p></li>
<li><h3>10</h3><p>jan</p></li>
<li><h3>11</h3><p>jan</p></li>
<li><h3>12</h3><p>jan</p></li>
</ul>
</div>
<div id='box'>
<h3>1月份</h3>
<p>滑动后或多或少的</p>
</div>
</div>

css部分

<style type="text/css">
ul,
ul li{
list-style: none;
margin:0 ;
padding:0 ;
}
.tabBox:after{
clear: both;
display: block;
content: " ";
visibility: hidden;
}
.tabBox{
width:600px ;
margin: 0 auto;
}
.tabBox ul li{
width:188px ;
float: left;
text-align: center;
background:#6C6669 ;
color:#fff ;
margin:4px ;
}
#box{
width:586px ;
height: 200px;
background:#8996A0 ;
margin: 0 auto;
}
</style>

<script type="text/javascript">
function getId(id){ 
return document.getElementById(id);
};
var arr=[
'1滑动后或多或少的',
'2hhdsdhsdhskdhskdhskhds',
'3都是地搜ID搜ID搜',
'4绝大多数进度就说的',
'5我hi的实打实地上打电话',
'6皮卡皮带的啪嗒的',
'7几点睡觉第三季度',
'8较好的跨世纪的谁看见的',
'9IE哦我IE哦我IE',
'10滑动达克赛德卡死了的',
'11电视剧的设计师电视剧',
'12就看见的肯德基卡的'
];
window.onload=function(){
var navBox=getId('nav').getElementsByTagName('li');
var box=getId('box');

for(var i=0;i<navBox.length;i++){
navBox[i].index=i;
navBox[i].onmouseenter=function(){
box.innerHTML='<h3>'+(this.index+1)+'月份</h3><p>'+arr[this.index]+'</p>'
}

}
}
</script>