日历描述:有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