学习记录
01.练习数组的用法
02.理解this.index的用法
03.绑定事件深入练习理解
html代码
1 <div id="date"> 2 <ul id="uldate"> 3 <li class="active">1月</li> 4 <li>2月</li> 5 <li>3月</li> 6 <li>4月</li> 7 <li>5月</li> 8 <li>6月</li> 9 <li>7月</li> 10 <li>8月</li> 11 <li>9月</li> 12 <li>10月</li> 13 <li>11月</li> 14 <li>12月</li> 15 </ul> 16 <div class="clear"></div> 17 <div class="content" id="text"> 18 19 </div> 20 </div>
css样式基础美化
1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 margin:0; 5 padding:0; 6 } 7 #date{ 8 width:500px; 9 margin: 0 auto; 10 } 11 ul{ 12 padding: 0; 13 list-style: none; 14 } 15 16 ul li{ 17 float: left; 18 width:120px; 19 height: 120px; 20 background: rgba(98,96,96,1.00); 21 text-align: center; 22 line-height: 120px; 23 border: rgba(243,236,237,1.00) solid 1px; 24 color: aliceblue; 25 font-size: 24px; 26 font-weight: bold; 27 } 28 .clear{ 29 clear: both; 30 } 31 .content{ 32 33 border: #2B2B2B solid 1px; 34 } 35 .content h3{ 36 background: #A20002; 37 line-height: 35px; 38 padding-left: 15px; 39 color: aliceblue; 40 } 41 .content p{ 42 color: rgba(103,103,103,1.00); 43 line-height: 25px; 44 padding: 10px; 45 } 46 .active{ 47 background: #FFFFFF; 48 border: #535353 solid 1px; 49 color:#CB0DF5; 50 }
JavaScript效果实现
1 var oLi=document.getElementsByTagName('li'); 2 var oTxt=document.getElementById('text'); 3 var i=0; 4 var arr=[ 5 '一月份相关内容', 6 '二月份相关内容', 7 '三月份相关内容', 8 '四月份相关内容', 9 '五月份相关内容', 10 '六月份相关内容', 11 '七月份相关内容', 12 '八月份相关内容', 13 '九月份相关内容', 14 '十月份相关内容', 15 '十一月份相关内容', 16 '十二月份相关内容' 17 ] 18 for(i=0;i<oLi.length;i++){ 19 oLi[i].index=i; //获取当前索引的值，i必须是一个循环的变量 20 oTxt.innerHTML="<h3>"+1+"月活动标题</h3><p>"+arr[0]+"</p>"; //鼠标未移入前显示当前月份，有待完善 21 oLi[i].onmouseover=function(){ 22 for(i=0;i<oLi.length;i++){ 23 oLi[i].className=""; 24 } 25 this.className="active"; 26 27 oTxt.innerHTML="<h3>"+(this.index+1)+"月活动标题</h3><p>"+arr[this.index]+"</p>"; //this.index打印当前索引的值 28 } 29 30 }