<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}
li:hover{background-color: #ccc;color:red;}
.li-current {background-color: #ccc;color:red;}
li{float:left;border:1px solid #000;width: 98px;text-align: center;height: 28px;}
.tab-list{width: 298px;height:270px;border:1px solid #000;margin:0 auto;clear:both;position: relative;}
.tab-list div{width: 298px;height:270px;position: absolute; opacity:0;filter:alpha(opacity=0);}
.tab-list .current{opacity:1;filter:alpha(opacity=100);}
.tab-list input{width: 80px;height: 50px;}
</style>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="control-menu">
<li>001</li>
<li>002</li>
<li>003</li>
</ul>
<div class="tab-list" id="tab-list">
<div class="current">0001
<input type="button" name="" value="0001">
</div>
<div >0002
<input type="button" name="" value="0002">
</div>
<div >0003
<input type="button" name="" value="0003">
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('control-menu');
var aLi=oUl.getElementsByTagName('li');
var oDiv=document.getElementById('tab-list');
var options=oDiv.getElementsByTagName('div');
var i=0;
for (i;i<aLi.length ; i++) {
aLi[i].index=i;
aLi[i].onmouseover=function(){
show(this.index);
}
}
function show(a){
for (var j = 0;j<aLi.length ; j++ ) {
options[j].className="";//清除原有样式
aLi[j].className="";
}
options[a].className="current";
aLi[a].className="li-current";
}
}
</script>
</body>
</html>