（1）功能描述：
鼠标经过月份，下面显示对应月份的节日。
（2）实现代码：
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <div id="box"> <ul id="months"> <li class="active"><h2>1</h2><span>JAN</span></li> <li><h2>2</h2><span>FER</span></li> <li><h2>3</h2><span>MAR</span></li> <li><h2>4</h2><span>APR</span></li> <li><h2>5</h2><span>MAY</span></li> <li><h2>6</h2><span>JUN</span></li> <li><h2>7</h2><span>JUL</span></li> <li><h2>8</h2><span>AUG</span></li> <li><h2>9</h2><span>SEP</span></li> <li><h2>10</h2><span>OCT</span></li> <li><h2>11</h2><span>NOV</span></li> <li><h2>12</h2><span>DEC</span></li> </ul> <div id="content"> <h2>1月节日</h2> <p>元旦：1月1日至3日放假三天。</p> </div> </div> </body> </html>
CSS：
<style> *{margin: 0px;padding: 0px;} body{padding: 100px;font-size: 13px;} li{list-style: none;} #box{width: 294px;background-color: #eaeaea;overflow: hidden;} #box #months{padding: 5px;overflow: hidden;} #box #months li{float: left;width: 59px;height: 59px;background-color: #424242;margin: 5px;text-align: center;color: #fff;border: 1px solid #424242;cursor: pointer;} #box #months li h2{height: 30px;line-height: 30px;} #box #months li span{display: block;height: 30px;line-height: 30px;} #box #months li.active{color: #ff6699;background-color: #fff;border: 1px solid #424242;} #box #months li.active h2{} #box #months li.active span{} #box #content{background-color: #f1f1f1;color: #666666;margin: 10px;border: 1px solid #fff;padding-left: 5px;} #box #content h2{font-size: 14px;height: 30px;line-height: 30px;} #box #content p{height: 24px;line-height: 24px;} </style>
JS：
<script> window.onload=function(){ var gala = [ '元旦：1月1日至3日放假三天。', '春节：2月2日至8日放假7天。', '妇女节：3月8日妇女节，与我无关。', '清明节：4月3日至5日放假3天', '劳动节：4月30日至5月2日放假3天。', '端午节：6月4日至6日放假3天。', '小暑：7月7日小暑。不放假。', '七夕节：8月6日七夕节。不放假。', '中秋节：9月10日至12日放假3天。', '国庆节：10月1日至7日放假7天。', '立冬：11月8日立冬。不放假。', '艾滋病日:12月1日' ] // alert(gala[0]); var aLi = document.getElementById('months').getElementsByTagName('li'); var oBox = document.getElementById('content'); for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onmouseover=function(){ for(var j=0;j<aLi.length;j++){ aLi[j].className=''; } this.className='active'; oBox.innerHTML='<h2>'+(this.index+1)+'月节日</h2><p>'+gala[this.index]+'</p>'; } } } </script>
(3)效果图如下所示：
(4)学习要点：
将数据存放在数组中。