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>
![](https://images2015.cnblogs.com/blog/1134366/201705/1134366-20170504171917867-1179501848.png)