1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title></title>
6 <style type="text/css">
7 * { padding: 0; margin: 0; }
8 li { list-style: none; }
9 body { background: #f6f9fc; font-family: arial; }
10 .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
11 .calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
12 .calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
13 .calendar li h2 { font-size: 20px; padding-top: 5px; }
14 .calendar li p { font-size: 14px; }
15 .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
16 .calendar .active p { font-weight: bold; }
17 .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
18 .calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
19 .calendar .text p { font-size: 12px; line-height: 18px; }
20 </style>
21 <script type="text/javascript">
22 arr=[‘1快过年了，大家可以商量着去哪玩吧～‘,‘2大家好好学习吧222222~~~‘,‘3大家好好学习吧222222333~~~‘,‘4大家好好学习吧222444222~~~‘,‘5大家好好学习555吧222222~~~‘,‘6大家好好学习吧666222222~~~‘,‘7大家好好学习吧227772222~~~‘,‘8大家好好学习吧28888822222~~~‘,‘9大家好好学习吧99999222222~~~‘,‘10大家好好学习10000000吧222222~~~‘,‘11大家好好学习吧111111222222~~~‘,‘12大家好好学习吧22222200000000000~~~‘]
23 var aDay, oTxt;
24 window.onload=function(){
25 aDay=document.getElementById(‘ul‘).getElementsByTagName(‘li‘);
26 oTxt=document.getElementById(‘txt‘);
27 for(var i=0; i<aDay.length; i++){
28 aDay[i].index=i;
29 aDay[i].onclick=function(){
30 for(var j=0; j<aDay.length; j++){
31 aDay[j].className=‘‘;
32 }
33 this.className=‘active‘;
34 oTxt.innerHTML=‘<h2>‘+(this.index+1)+‘月份</h2><p>‘+arr[this.index]+‘</p>‘;
35 }
36 }
37 }
38 </script>
39 </head>
40
41 <body>
42 <div id="tab" class="calendar">
43 <ul id="ul">
44 <li class="active"><h2>1</h2><p>JAN</p></li>
45 <li><h2>2</h2><p>FER</p></li>
46 <li><h2>3</h2><p>MAR</p></li>
47 <li><h2>4</h2><p>APR</p></li>
48 <li><h2>5</h2><p>MAY</p></li>
49 <li><h2>6</h2><p>JUN</p></li>
50 <li><h2>7</h2><p>JUL</p></li>
51 <li><h2>8</h2><p>AUG</p></li>
52 <li><h2>9</h2><p>SEP</p></li>
53 <li><h2>10</h2><p>OCT</p></li>
54 <li><h2>11</h2><p>NOV</p></li>
55 <li><h2>12</h2><p>DEC</p></li>
56 </ul>
57 <div class="text" id="txt">
58 <h2>1月活动</h2>
59 <p>1快过年了，大家可以商量着去哪玩吧～</p>
60 </div>
61 </div>
62 </body>
63 </html>
时间： 2024-10-28 22:22:27