<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日歷練習</title>
<style type="text/css">
.datetab{ width:400px; height: 400px; text-align: center; margin-top: 30px; margin-left: 350px; }
.datetab ul{ list-style: none; }
.datetab ul li{ width: 100px; height:100px; float:left; color:#fff; background: #000; border:#ccc 1px solid; }
#txt{ position: absolute; margin-top: 408px; margin-left: 40px; border:#ccc 1px solid; height:140px; width: 286px; height:0 auto; background: #000; color:#fff; padding: 10px; }
</style>
<script type="text/javascript">
window.onload=function(){
var aDeta=[ //設置每個月活動數組
"一日不見，如隔三秋；思之一念，何謂三年！相思本是無憑語，偏向花箋費淚行！",
"忠骨柔腸，盡在離殤。夏夜風，透心涼；寒窗雨，畫滄桑！",
"離河橋、離河水、離河橋下生離愁！有你，心疊千層浪；無你，夢回萬重山！",
"如果，歲月是一部剪輯的影集，我願沐浴在你時光的倩影中，舉杯邀明月！",
"如果，歲月能夠緬懷前進的步伐，我願沉醉在遲暮黃昏的笑顏，勾勒紅暈！",
"如果，歲月是一場忘情的邂逅，我願沉湎眼影的徜徉，不讓凄涼填滿心房！",
"常說：平常心，平常至無心，無心方能成道！然，無獨有偶，相思卻叛逆而行！",
"平生不會相思，才會相思，便害相思！騰雲駕霧青冥鬧，一記相思雲端繞！",
"身覺浮雲無所著，心如柳絮氣若絲！殘一縷余香在此，盼卿卿佳人何之！症之來時，正是何時？",
"那一夜，燈半昏時，月半明時！心似絡緯網，中有千萬結！理不清的纏綿悱惻，忘不掉的劍若游痕！",
"紛至沓來，北雁南歸，錦書一封，怡然自得！凝眸往昔，如煙紅塵，離愁別恨思無窮，迢迢春水向東流！",
"無情不似多情苦，一寸還成千萬縷。天涯地角有窮時，只有相思無盡處。淚也思，不淚也思！", ];
var ali=document.getElementsByTagName('li'); //獲取單元格li的id
var otxt=document.getElementById("txt"); //獲取放置活動的div
var i=0;
for(i=0;i<ali.length;i++){
ali[i].index=i; //建立索引值
ali[i].onmouseover=function(){ //給每個月份加鼠標移入事件
for(i=0;i<ali.length;i++){
ali[i].style='';
}
this.style.background="#ccc";
this.style.color="#015705" ; //設置當鼠標進入時的樣式
otxt.innerHTML="<h3>"+(this.index+1)+"月活動</h3><p>" +aDeta[this.index]+"</p>"; //給div中寫入信息
};
}
}
</script>
</head>
<body>
<div id="tab" class="datetab">
<ul>
<li><h2>1月</h2><p>JAN</p></li>
<li><h2>2月</h2><p>FER</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>
</li>
</ul>
<div id="txt">
</div>
</div>
</body>
</html>