复制代码 代码如下: <BR>body,ul,li,h2,p <BR>{ <BR>margin:0px; <BR>padding:0xp; <BR>} <BR>#div1 <BR>{ <BR>width:200px; <BR>height:200px; <BR>background:#ccc; <br><br>} <BR>.calendar <BR>{ <BR>width:240px; <BR>height:345px; <BR>background:#ccc; <BR>margin:auto; <BR>} <BR>.calendar ul <BR>{ <BR>list-style:none; <BR>width:232px; <BR>height:260px; <BR>margin:0px; <BR>padding:0px; <BR>} <br><br>.calendar ul li <BR>{ <BR>width:45px; <BR>height:65px; <BR>background:#333; <BR>float:left; <BR>display:inline; <BR>margin-left:11px; <BR>margin-top:10px; <BR>border:1px solid #ccc; <BR>text-align:center; <BR>color:#FFF; <br><br>} <BR>.calendar ul li:hover <BR>{ <BR>border:1px solid #000; <br><br>} <BR>.text <BR>{ <BR>background:#F96; <BR>margin:10px; <BR>padding-bottom:10px; <BR>height:45px; <BR>} <BR>.text h2 <BR>{ <BR>display:inline; <br><br>} <BR>.active <BR>{ <BR>background:#FFF !important; <BR>color:#C03 !important; <BR>} <br><br> <BR>/* window.onload=function() <BR>{ <BR>var oBtn=document.getElementById('btn1'); <BR>var oTxt=document.getElementById('txt1'); <BR>var oDiv=document.getElementById('div1'); <BR>oBtn.onclick=function() <BR>{ <BR>oDiv.innerHTML=oTxt.value; <BR>} <br><br>}*/ <BR>window.onload=function() <BR>{ <BR>var aLi= document.getElementsByTagName('li'); <BR>var Otxt =document.getElementById('tab').getElementsByTagName('div')[0]; <BR>var aDats =['元旦1月1日','2月14日情人节','3月3日全国爱耳日', <BR>'4月1日愚人节','5月1日国际劳动节','6月1日 国际儿童节', <BR>'7月1日中国共产党诞生日','8月1日中国人民解放军建军节','9月10日中国教师节', <BR>'10月1日中华人民共和国国庆节','11月9日消防宣传日','12月3日世界残疾人日' <BR>]; <br><br>var i=0; <BR>for(i=0;i<aLi.length;i++) //for循环历遍li元素 <BR>{ <BR>aLi[i].index=i; <BR>aLi[i].onmouseover =function() //添加鼠标指向事件 <BR>{ <br><br>for(i=0;i<aLi.length;i++) //for循环历遍li元素去掉li样式 <BR>{ <BR>aLi[i].className =''; <BR>} <BR>this.className ='active'; //给当前标签添加active 样式 <br><br>Otxt.innerHTML ='<h2>'+(this.index+1)+''+'月'+'<p>'+aDats[this.index]+''; <BR>} <br><br>} <br><br>}; <br><br> 1 JAN 2 FER 3 MAR 4 APR 5 MAY 6 JUM 7 JUL 8 AUG 9 SEP 10 OCT 11 NOV 12 DEC 效果预览：
