复制代码代码如下: <br>body,ul,li,h2,p <br>{ <br>margin:0px; <br>パディング:0xp; <br>} <br>#div1 <br>{ <br>width:200px; <br>高さ:200ピクセル; <br>背景:#ccc; <br><br>} <br>.calendar <br>{ <br>width:240px; <br>高さ:345ピクセル; <br>背景:#ccc; <br>マージン:自動; <br>} <br>.calendar ul <br>{ <br>list-style:none; <br>幅:232px; <br>高さ:260ピクセル; <br>マージン:0px; <br>パディング:0px; <br>} <br><br>.calendar ul li <br>{ <br>width:45px; <br>高さ:65px; <br>背景:#333; <br>浮動小数点:左; <br>表示:インライン; <br>マージン左:11px; <br>マージントップ:10px; <br>ボーダー:1px ソリッド #ccc; <br>text-align:center; <br>カラー:#FFF; <br><br>} <br>.calendar ul li:hover <br>{ <br>border:1px Solid #000; <br><br>} <br>.text <br>{ <br>background:#F96; <br>マージン:10px; <br>パディングボトム:10px; <br>高さ:45px; <br>} <br>.text h2 <br>{ <br>display:inline; <br><br>} <br>.active <br>{ <br>background:#FFF !重要; <br>色:#C03 !重要; <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>{ <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) '</h2>' '月' '<p>' aDats[this.index] '</p>'; <br>} <br><br>} <br><br>}; <br><br> 1JAN 2 FER 3 MAR 4 APR 5 MAY 6 JUM 7 JUL 8 8月 9 SEP 10 10月 11 NOV 12 12月
