<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } #tab { 200px; height:300px; background:#9FF; margin-left:300px; margin-top:50px; } .calendar ul { 150px; height:180px; list-style-type:none; text-align:center; padding-left:25px; } ul .active { 40px; height:40px; background:#FFF; border:1px solid #000; float:left; } .active h3 { margin-top:2px; color:#F0F; 40px; height:20px; } .active p { color:#F0F; font-size:12px; 40px; height:15px; } ul li { float:left; background:#990; 40px; height:40px; margin-left:5px; margin-top:5px; text-align:center; border:1px solid #000; } li h3 { margin-top:2px; color:#FFF; 40px; height:20px; } li p { color:#FFF; font-size:12px; 40px; height:15px; } .text { 140px; height:80px; background:#9F9; padding-top:10px; margin-top:20px; margin-left:28px; } .text h3 { 80px; height:20px; padding-top:5px; } .text p { 150px; height:40px; margin-top:10px; } </style> <script> window.onload=function() { var arr=['快过年了，大家可以商量着去哪玩吧~', '二月，春天还会远吗？', '三月，春花萌动的季节', '四月，词穷啦', '五月，欢快的过端午', '六月，天气逐渐变热', '七月，已经开始入秋了吗？', '八月，全家团圆过中秋', '九月，生日要到了，嘻嘻~', '十月，快到冬天啦', '十一月，下雪了', '十二月，马上又老了一岁']; var oTab=document.getElementById('tab'); var oLi=oTab.getElementsByTagName('li'); var oTxt=oTab.getElementsByTagName('div')[0]; for (var i=0; i<oLi.length; i++) { oLi[i].index=i; oLi[i].onmouseover=function() { for (var i=0; i<oLi.length; i++) oLi[i].className=''; this.className='active'; oTxt.innerHTML='<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; }; } }; </script> </head> <body> <div id="tab" class="calendar"> <ul> <li class="active"><h3>1</h3><p>JAN</p></li> <li><h3>2</h3><p>FER</p></li> <li><h3>3</h3><p>MAR</p></li> <li><h3>4</h3><p>APR</p></li> <li><h3>5</h3><p>MAY</p></li> <li><h3>6</h3><p>JUN</p></li> <li><h3>7</h3><p>JUL</p></li> <li><h3>8</h3><p>AUG</p></li> <li><h3>9</h3><p>SEP</p></li> <li><h3>10</h3><p>OCT</p></li> <li><h3>11</h3><p>NOV</p></li> <li><h3>12</h3><p>DEC</p></li> </ul> <div class="text"> <h2>1月活动</h2> <p>快过年了，大家可以商量着去哪玩吧~</p> </div> </div> </body> </html>