<!DOCTYPEHTML><html><head><title>test</title><metacharset="utf-8"><styletype="text/css">#tab{width:4
<! DOCTYPE HTML><html><head><title>test</title><meta charset="utf-8"><style type="text/css">#tab {width:415px;height:600px;background: grey;border-radius:10px;float:left;margin-left: 500px;}li{width:100px;height: 100px;border:1px solid black;border-radius:10px;float: left; list-style: none;color:white;font-weight: bold;margin: 5px;} #tab .text{width:300px;height:50px;margin-bottom: 5px;float: right;margin-bottom: 5px;} p{margin-left: 36px;} h2{margin-left: 38px;} #div2 {width:300px;height:100px;font-weight: bold;color:white; border: 1px solid black; float: left;margin-left: 58px;margin-top: 18px;text-align:center;text-align: middle;} .active{background: #eeeeee;color:pink;border: 1px solid #eeeeee;}</style><script type="text/javascript">window.onload=function () { var arr=['这是1月','这是2月','这是3月','这是4月', '这是5月','这是6月','这是7月','这是8月', '这是9月','这是10月','这是11月','这是12月']; var wDiv=document.getElementById('tab'); var wLi=wDiv.getElementsByTagName('li'); var wTx=wDiv.getElementsByTagName('div')[0]; for(var i=0;i<wLi.length;i++) { wLi[i].index=i; wLi[i].onmouseover=function() { for(var i=0;i<wLi.length;i++) { wLi[i].className=''; } this.className='active'; wTx.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>'; } } }</script></head><body><div id="tab" class="canlender"> <ul> <li class="active"><h2>1</h2><p>JAN</p></li> <li><h2>2</h2><p>FEB</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>DES</p></li> </ul> <div class="txt" id="div2"> <h2>1月份</h2><p>这是1月</p> </div></div></body></html>
