Html
<!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> <link rel="stylesheet" href="日历样式.css" type="text/css" /> <script src="日历Js.js" type="text/javascript"></script> </head> <body> <div id="table"> <ul> <li class="active"><h2>1</h2><P>JAN</P></li> <li><h2>2</h2><P>FER</P></li> <li><h2>3</h2><P>MAR</P></li> <li><h2>4</h2><P>APR</P></li> <li><h2>5</h2><P>MAY</P></li> <li><h2>6</h2><P>JUN</P></li> <li><h2>7</h2><P>JUL</P></li> <li><h2>8</h2><P>AUG</P></li> <li><h2>9</h2><P>SEP</P></li> <li><h2>10</h2><P>OCT</P></li> <li><h2>11</h2><P>NOV</P></li> <li><h2>12</h2><P>DEC</P></li> </ul> <div class="div1"> <h2>一月活动</h2> <p>快过年了，大家商量着去哪玩啊</p> </div> </div> </body> </html>
css
@charset "utf-8"; /* CSS Document */ #table{ 300px; height:700px; background-color:#CCC; text-align:center; position:absolute; margin:0 600px 0 500px; } #table ul{ line-height:10px; } #table ul li{ float:left; padding:20px; list-style-type:none; } #table .div1{ 300px; height:200px; background:red; position:absolute; bottom:0px; } #table ul h2 { color:#FFF; } #table ul p { color:#FFF; } .active{ background-color:black; }
Js
// JavaScript Document window.onload=function() { var arr=[ ' 一月', '二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月', ] var aTal=document.getElementById('table'); var aLi=aTal.getElementsByTagName('li'); var aDiv1=aTal.getElementsByTagName('div')[0]; for (var i=0;i<aLi.length;i++) { aLi[i].index=i; aLi[i].onmouseover=function() { for (var i=0;i<aLi.length;i++) { aLi[i].className=""; } this.className="active"; aDiv1.innerHTML= '<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>'; } }