日历描述：有12个月，鼠标指向哪个月就会在下方显示月数和当月活动。
思路：
1、获取元素。
2、用数组定义月份内容
3、for循环历遍li元素添加鼠标指向事件。
4、for循环历遍li元素去掉li样式。
5、为当前li元素添加样式。
6、用innerHTML追加当前月份内容。
JS代码：
1 <script> 2 var neirong=['一','二','三','四','五','六','七','八','九','十','十一','十二',]; 3 window.onload=function(){ 4 var tab=document.getElementById('tab'); 5 var ul=tab.getElementsByTagName('ul')[0]; 6 var li=ul.getElementsByTagName('li'); 7 var div=tab.getElementsByTagName('div')[0]; 8 9 var i=0; 10 for(i=0;i<li.length;i++){ 11 li[i].index=i; 12 li[i].onmouseover=function(){ 13 for(i=0;i<li.length;i++){ 14 li[i].className=''; 15 }; 16 this.className='active'; 17 div.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+neirong[this.index]'+'</p> 18 }; 19 }; 20 }; 21 </script>
HTML代码：
1 <div id="tab" class="calendar"> 2 3 <ul> 4 <li class="active"><h2>1</h2><p>JAN</p></li> 5 <li><h2>2</h2><p>FER</p></li> 6 <li><h2>3</h2><p>MAR</p></li> 7 <li><h2>4</h2><p>APR</p></li> 8 <li><h2>5</h2><p>MAY</p></li> 9 <li><h2>6</h2><p>JUN</p></li> 10 <li><h2>7</h2><p>JUL</p></li> 11 <li><h2>8</h2><p>AUG</p></li> 12 <li><h2>9</h2><p>SEP</p></li> 13 <li><h2>10</h2><p>OCT</p></li> 14 <li><h2>11</h2><p>NOV</p></li> 15 <li><h2>12</h2><p>DEC</p></li> 16 </ul> 17 18 <div class="text"> 19 <h2>1月活动</h2> 20 <p>快过年了，大家可以商量着去哪玩吧～</p> 21 </div> 22 23 </div>