<div id="div1">
<ul>
<li class="active">一月</li>
<li>二月</li>
<li>三月</li>
<li>四月</li>
<li>五月</li>
<li>六月</li>
<li>七月</li>
<li>八月</li>
<li>九月</li>
<li>十月</li>
<li>十一月</li>
<li>十二月</li>
</ul>
<div id="div2">
</div>
</div>
css:
body,div{
margin: 0 auto;
}
#div1{
width: 400px;
height: 600px;
border: 1px solid black;
background: silver;
}
#div1 ul{
width: 400px;
height: 600px;
text-align: center;
}
#div1 ul li{
list-style-type: none;
float: left;
width: 100px;
height: 100px;
line-height: 100px;
margin:5px;
color:white;
background: #575757;
border: 1px solid white;
}
#div1 .active{
background:white;
color:black;
border: 1px solid black;
}
#div2{
margin-top: -150px;
text-align: center;
clear: both;
width: 320px;
height: 100px;
background-color: black;
border: 1px solid white;
color:white;
}
JS
<script>
window.onload=function()
{
var arr=["正月闹新春",
"早春二月 乍暖还寒",
"阳春三月 花红柳绿好踏青",
"四月樱花灿烂",
"五月到处繁花似锦",
"六月小荷才露尖尖角",
"七月夜空萤火虫闪烁",
"八月桂花飘香,江河水涨",
"九月香山红似火",
"十月瓜果飘香",
"十一月唯有金菊耐寒",
"十二月银装素裹"];
var odiv=document.getElementById('div1');
var obtn=odiv.getElementsByTagName('li');
var otxt=odiv.getElementsByTagName('div')[0];
for (var i=0; i<obtn.length;i++) {
obtn[i].index=i;
obtn[i].onmouseover=function()
{
for (var i=0; i<obtn.length;i++) {
obtn[i].className='';
}
this.className="active";
otxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
};
}
}
</script>