<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/video.css">
<script src="./js/jquery2.1.4.min.js"></script>
<title>1</title>
<style type="text/css">
.box{
background: #888;
color: #fff;
width: 500px;
}
.active{
background: #000;
color:#fff;
}
ul{
list-style: none;
}
li{
float: left;
width: 100px;
height: 100px;
color: #888;
background: #fff;
margin: 2px;
text-align: center;
}
.clearfix:after{
display: block;
content: "";
clear: both;
height: 0;
}
.text{
width: 500px;
height: 100px;
background: #f2f2f2;
}
</style>
</head>
<body>
<div id="tab" class="box" class="clearfix">
<ul class="clearfix">
<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="text">
<h2></h2>
<p></p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("tab")
var aLi=oDiv.getElementsByTagName('li')
var tex=oDiv.getElementsByClassName("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";
tex.innerHTML="<h2>1</h2><p>2</p>";
};
};
}
</script>
灬紫羽
荼酒