<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.center {
width: 270px;
height: 300px;
background: antiquewhite;
margin: 0 auto;
}
li {
display: inline-block;
width: 50px;
height: 50px;
list-style: none;
background: black;
color: white;
margin-left: 26px;
margin-top: 20px;
padding: auto;
}
.buttom {
background: aliceblue;
margin: 0 auto;
width: 250px;
height: 80px;
padding: 10px;
}
h2 {
margin-left: 14px;
}
ul li p {
margin-left: 10px;
}
}
.active {
background: white;
color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var arr=[
11111111111111111111111111111111,
2222222222222222222222222222222,
3333333333333333333333333,
4444444444444444444444444444,
555555555555555555555555,
6666666666666666666666
]
var odiv = document.getElementById("div1");
var oli = odiv.getElementsByTagName("li");
var ldiv = odiv.getElementsByTagName("div")[0]
for (var i = 0; i < oli.length; i++) {
oli[i].index=i;
oli[i].onmouseover = function() {
for (var j = 0; j < oli.length; j++) {
oli[j].className = "";
}
this.className = "active";
ldiv.innerHTML='<h2>'+(this.index+1)+'月份</h2><p>'+arr[this.index]+'</p>'
}
}
}
</script>
</head>
<body>
<div id="div1" class="center">
<ul>
<li>
<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>Jun</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 id="" class="buttom">
<h2>1月份</h2>
<p>1月份来了</p>
</div>
</div>
</body>
</html>
慕用0418482
相关分类