<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {width: 320px;height: 550px;background: gainsboro; margin: 50px auto;}
#div1 li{width: 70px;height: 70px;float: left;border: 2px solid black; list-style-type: none;line-height: 5px;
margin-top: 12px;margin-right: 12px; background:greenyellow;font-size: 20px;text-align: center;
font-weight: 700;}
#div1 .active{background: white;}
.div2{float: right;margin-top: 10px; margin-left: 40px; border: 1px solid black;margin-right: 35px;
width: 242px;background-color: darkorchid;}
h2{font-size: 23px;}
p{font-family: '新宋体';}
</style>
<script>
window.onload=function () {
var outP=['斯蒂芬斯蒂芬是否健康',
'斯蒂芬空间上的裂缝撒旦法撒旦飞机拉萨建立地方了撒地方',
'桑德拉随即赶来将阿斯sad了房间立刻撒娇了发还是地方',
'房管局拉萨可根据阿里撒的了开房间啊收费卡还是开放后',
'士大夫撒旦解放了将撒旦萨拉的将法海寺',
'撒旦解放立刻撒娇的了房间阿隆索的减肥士大夫了库哈斯12123131313131',
'桑德拉克拉斯kg撒娇格兰卡随即赶来撒地方买了刷卡缴费',
'撒旦浪费gas就感觉阿特斯里街头isdfsfsd饿死将累块积苏',
'’s啊的了房间数量共计流沙撒地方南斯拉夫首付款',
'’了kg哈斯勒的乖哈手机号撒地方将阿斯了的看风景',
'岁的富婆额外人首府萨克疯狂萨法撒旦法各级各类科技的管理的将管理会计的',
'右腿为前提撒的规范化萨斯的空间后发动地方将阿斯了将'];
var oDiv1=document.getElementById('div1');
var oLi=oDiv1.getElementsByTagName('li');
var oDiv=oDiv1.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';
oDiv.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+outP[this.index]+'</p>';
}
oLi[i].onclick=function () {
oDiv.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+"你好我爱你，你是我的..."+'</p>';
}
}
}
</script>
</head>
<body>
<div id="div1" class="div1">
<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="div2">
<h2>1月份</h2>
<p id="ppp">妮妮妮妮妮妮妮妮妮妮妮妮斯蒂芬撒飞机迪斯科符合发生口角后发动快速减肥好卡但是打扫房间还是地方开始打</p>
</div>
</div>
</body>
</html>
