代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>calendar</title>
<style>
#div1{
margin-left: 646px;
margin-top: 100px;
padding: 2px;
width: 252px;
height: 500px;
background-color: grey;
}
ul{
list-style: none;
padding-right: 2px;
}
ul li{
width: 55px;
height: 81px;
float: left;
color: white;
background-color: black;
margin-top: 10px;
margin-right: 10px;
text-align: center;
}
ul li p{
margin-top: -15px;
}
.active:hover{
background-color:white;
color: black;
}
.text{
float: left;
width: 150px;
margin-left: 40px;
background-color: aliceblue;
height: 115px;
}
</style>
<script>
window.onload = function(){
var odiv = document.getElementById('div1');
var olis = odiv.getElementsByTagName('li');
var otxt = odiv.getElementsByTagName('div')[0];
var arr=[
'我喜欢一月',
'我喜欢二月',
'我喜欢三月',
'我喜欢四月',
'我喜欢五月',
'我喜欢六月',
'我喜欢七月',
'我喜欢八月',
'我喜欢九月',
'我喜欢十月',
'我喜欢十一月',
'我喜欢十二月'
]
for(var i=0;i<olis.length;i++){
olis[i].index = i;
olis[i].onmouseover = function(){
for(var i=0;i<olis.length;i++){
olis[i].className='';
}
this.className='active';
otxt.innerHTML = '<h2>'+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id="div1">
<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>
效果: