简易万年历这个案例是比较有意义的，虽然是个小demo，但涵盖的知识是一点也不少啊！需要静下心来好好理解，完全理解下来，就会觉得也没那么难，理解了这个demo，后续很多东西都知道怎么写了。好啦，先上HTMl部分的代码。
1 <body> 2 <div id="tab" class="calendar"> 3 <ul id="box"> 4 <li class="active"> 5 <h2>1</h2> 6 <p>JAN</p> 7 </li> 8 <li> 9 <h2>2</h2> 10 <p>FER</p> 11 </li> 12 <li> 13 <h2>3</h2> 14 <p>MAR</p> 15 </li> 16 <li> 17 <h2>4</h2> 18 <p>APR</p> 19 </li> 20 <li> 21 <h2>5</h2> 22 <p>MAY</p> 23 </li> 24 <li> 25 <h2>6</h2> 26 <p>JUN</p> 27 </li> 28 <li> 29 <h2>7</h2> 30 <p>JUL</p> 31 </li> 32 <li> 33 <h2>8</h2> 34 <p>AUG</p> 35 </li> 36 <li> 37 <h2>9</h2> 38 <p>SEP</p> 39 </li> 40 <li> 41 <h2>10</h2> 42 <p>OCT</p> 43 </li> 44 <li> 45 <h2>11</h2> 46 <p>NOV</p> 47 </li> 48 <li> 49 <h2>12</h2> 50 <p>DEC</p> 51 </li> 52 </ul> 53 <div class="text" id="txt"> 54 <h2>1月活动</h2> 55 <p>快过年了，大家可以商量着去哪玩吧～</p> 56 </div> 57 </div> 58 </body>
样式可以自己更改哈！
1 <style>
2 * {
3 padding: 0;
4 margin: 0;
5 }
6
7 li {
8 list-style: none;
9 }
10
11 body {
12 background: #f6f9fc;
13 font-family: arial;
14 }
15
16 .calendar {
17 width: 210px;
18 margin: 0 auto;
19 padding: 10px 10px 20px 20px;
20 background: #eae9e9;
21 }
22
23 .calendar ul {
24 width: 210px;
25 overflow: hidden;
26 padding-bottom: 10px;
27 }
28
29 .calendar li {
30 float: left;
31 width: 58px;
32 height: 54px;
33 margin: 10px 10px 0 0;
34 border: 1px solid #fff;
35 background: #424242;
36 color: #fff;
37 text-align: center;
38 cursor: pointer;
39 }
40
41 .calendar li h2 {
42 font-size: 20px;
43 padding-top: 5px;
44 }
45
46 .calendar li p {
47 font-size: 14px;
48 }
49
50 .calendar .active {
51 border: 1px solid #424242;
52 background: #fff;
53 color: #e84a7e;
54 }
55
56 .calendar .active p {
57 font-weight: bold;
58 }
59
60 .calendar .text {
61 width: 178px;
62 padding: 0 10px 10px;
63 border: 1px solid #fff;
64 padding-top: 10px;
65 background: #f1f1f1;
66 color: #555;
67 }
68
69 .calendar .text h2 {
70 font-size: 14px;
71 margin-bottom: 10px;
72 }
73
74 .calendar .text p {
75 font-size: 12px;
76 line-height: 18px;
77 }
78 </style>
下面是javascript的代码，会加上注释，以防小白白看不懂哈！
1 <script>
2 // 模拟后端数据
3 var arr = ['快过年了，大家可以商量着去哪玩吧～',
4 '大家好好学习吧222222~~~',
5 '大家好好学习吧222222333~~~',
6 '大家好好学习吧222444222~~~',
7 '大家好好学习555吧222222~~~',
8 '大家好好学习吧666222222~~~',
9 '大家好好学习吧227772222~~~',
10 '大家好好学习吧28888822222~~~',
11 '大家好好学习吧99999222222~~~',
12 '大家好好学习10000000吧222222~~~',
13 '大家好好学习吧111111222222~~~',
14 '大家好好学习吧22222200000000000~~~'];
15 // 获取所有的li
16 var array = document.querySelectorAll("#tab ul li");
17 // 获取h2和p标签
18 var h2 = document.querySelector("#txt h2");
19 var p = document.querySelector("#txt p");
20 // 遍历数组，所有li绑定点击事件
21 for (var i = 0; i < array.length; i++) {
22 // 定义一个不可见的健（属性），将i的存放好，【提前给每个li都编号（默认没有编号）】
23 array[i].num = i;
24 // 点击事件
25 array[i].onclick = function () {
26 // 遍历数组，因为外面的i在这里是获取不到的，所以要重新遍历
27 for (var j = 0; j < array.length; j++) {
28 // 将所有li的类名都更改为空，即不存在样式
29 array[j].className = "";
30 }
31 // 被点击的那个对象的类名更改为active
32 this.className="active";
33 // 同时更改h2和p标签里面的内容
34 h2.innerHTML=this.num+1+"月活动";
35 p.innerHTML=arr[this.num];
36 }
37 }
38 </script>
理解下来，还是可以的；第一个难点是给所有li绑定事件的时候，循环是立即执行的，所以事件里面并不能直观的知道点击的是哪个，所以只能通过this关键字来获取；第二个难点是事实上用this我们同样不能知道是那个li，那样怎么更改所对应的信息呢，给编号，在事件发生前，循环内，给li一个不可见的属性（自己定义），存储每个li所对应的的下标。如果还是不能理解，评论留言！