<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
}
#outer{
400px;
height: 200px;
border: 1px solid #666;
}
#tab{
height: 30px;
background: #666;
}
#tab li{
100px;
height: 30px;
line-height: 30px;
text-align: center;
float: left;
color: white;
}
#tab li.current{
background: #ccc;
color: 000;
}
#content ul{
display: none;
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">html</li>
<li>css</li>
<li>js</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<ul>
<li>b</li>
<li>b</li>
<li>b</li>
</ul>
<ul>
<li>c</li>
<li>c</li>
<li>c</li>
</ul>
</div>
</div>
<script type="text/javascript">
var oLis=document.getElementById("tab").getElementsByTagName('li');
var oUls=document.getElementById("content").getElementsByTagName('ul');
for (var i = 0; i < oLis.length; i++) {
oLis[i].index=i;
oLis[i].onmouseover=function() {
for(var j=0;j<oLis.length;j++){
oLis[j].className='';
this.className='current';
oUls[j].style.display='none';
oUls[this.index].style.display='block';
}
}
};
</script>
</body>
</html>