月曆描述:有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>
轉載于:https://www.cnblogs.com/52css/archive/2013/02/27/2935766.html