1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script type="text/javascript"> 6 var innerText=[ 7 "农历一月也叫正月，吴自牧在《梦梁录·正月》中说，“正月朔日，谓之元旦，俗呼为新年。”", 8 "“春色满园关不住，一枝红杏出墙来。”宋人叶绍翁的诗句中的红杏，花开二月故称杏月。", 9 "春夏秋冬四季，三个月为一季，春季中排行老三，因此把三月叫做季月。", 10 "农历四月为麦子成熟的时候，《礼记·月令》说：“?孟夏之月?麦秋至。”蔡邕在《月令章句》解释为：“百谷各以其初生为春，熟为秋，故麦以孟夏为秋。”四月便称麦月。", 11 "农历五月最常用的别称为仲夏，它排行夏季之中。五月五日为端午节，旧时农家用菖蒲叶与艾叶等扎悬于门首，用以驱邪，因称五月为蒲月。", 12 "“荷叶罗裙一色裁，芙蓉向脸两边开。”?唐代王昌龄的《采莲曲》?这出污泥而不染的莲蓬，在暑月为人们带来阵阵凉意，故把六月称为荷月。", 13 "秋季的头一个月谓新秋。古时，瓜果成熟也在秋天，“米谷豆子，秋收冬藏”，把七月叫做瓜月。", 14 "秋季的八月居中，谓之仲秋。《尔雅·释天》中云：“八月为壮。”郝懿行义疏解释说，“壮者，大也。八月阴大盛，《易》之大壮，言阳大盛也。”故称八月为壮月。", 15 "“青女素娥俱耐冷，月中霜里斗婵娟。”李商隐把主霜雪的女神青女绰约仙姿描写得美妙绝伦，其摄入魂魄的精髓便是经得起严寒考验的特性。九月的别称除了霜月外，还有季秋、菊月、朽月等。", 16 "农历十月的别称有：初冬、开冬、露月、良月等。《尔雅·释天》中说：“十月为阳。”郭璞的注解为：“纯阴用事，嫌于无阳，故以名玄。”", 17 "了解后台编程的相关知识，能够和后台工程师配合完成大型交互应用 - 妙味课堂 - www.miaov.com", 18 "“墙角数枝梅，凌寒独自开。遥知不是雪，为有暗香来。”宋王安石的咏梅诗，已把寒冬梅花倔强的风骨和报道春之将至的信息描写得恰到妙处。从周代开始，古人把阴历十二月作为腊祭的日子，以狩猎禽兽祭先祖。" 19 ]; 20 window.onload=function () 21 { 22 var aLi=document.getElementsByTagName('li'); 23 //获取text 24 var aTxt=document.getElementById('tab').getElementsByTagName('div')[0]; 25 var i=0; 26 for(i=0;i<aLi.length;i++) 27 { 28 aLi[i].index=i;//!!! 29 aLi[i].onmouseover=function() 30 { 31 var innerT=""; 32 //当鼠标移入时先将所有LI的样式去除 33 for(i=0;i<aLi.length;i++) 34 { 35 aLi[i].className=''; 36 } 37 //修改此li的className 注意this！ 38 this.className='active'; 39 //修改text 40 aTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2>"+innerText[this.index]; 41 }; 42 } 43 }; 44 </script> 45 <style type="text/css"> 46 *{ 47 padding:0; 48 margin: 0; 49 } 50 li{ 51 list-style: none; 52 } 53 /*因为text文本大小不固定，所以无需设置height*/ 54 .all{ 55 width:210px; 56 margin: 0 auto; 57 padding:10px 10px 20px 20px; 58 background-color: #ccc; 59 60 } 61 .all ul{ 62 width:210px; 63 padding-bottom: 10px; 64 overflow: hidden; 65 } 66 .all li{ 67 float:left;/*浮动！！*/ 68 width:58px; 69 border:solid 1px pink; 70 margin:10px 10px 0 0; 71 text-align: center; 72 color:white; 73 background-color: black; 74 } 75 .all .text{ 76 width:178px; 77 padding:0 10px 10px; 78 border:solid 1px white; 79 padding-top: 10px; 80 background: #f1f1f1; color: #555; 81 } 82 .all .text h2{font-size: 14px;margin-bottom: 10px;} 83 .all .text p{font-size:12px;line-height: 18px;} 84 .all .active { border: 1px solid #424242; background: #fff; color: #e84a7e; } 85 .all .active h2 { } 86 .all .active p { font-weight: bold; } 87 </style> 88 </head> 89 <body> 90 91 <div id="tab" class="all"> 92 93 <ul> 94 <li class="active"><h1>1</h1><p>Jan</p></li> 95 <li><h1>2</h1><p>Feb</p></li> 96 <li><h1>3</h1><p>Mar</p></li> 97 <li><h1>4</h1><p>Apr</p></li> 98 <li><h1>5</h1><p>May</p></li> 99 <li><h1>6</h1><p>Jun</p></li> 100 <li><h1>7</h1><p>Jul</p></li> 101 <li><h1>8</h1><p>Aug</p></li> 102 <li><h1>9</h1><p>Sep</p></li> 103 <li><h1>10</h1><p>Oct</p></li> 104 <li><h1>11</h1><p>Nov</p></li> 105 <li><h1>12</h1><p>Dec</p></li> 106 </ul> 107 108 <div class="text"> 109 <h2>1月份</h2><p>1111111111111111111</p> 110 </div> 111 112 </div> 113 114 </body> 115 </html>
