<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
#container{width: 200px; position: relative; }
#tab-nav{width: 200px; height: 40px; background: #999;}
#tab-nav li{width: 50px; height: 40px; line-height: 40px; border-right: 1px solid #777; float: left; list-style: none; text-align: center; cursor: pointer;}
#tab-nav li:last-child{border: none;}
#tab-con{width: 200px; height: 200px;}
#tab-con li{width: 200px; height: 200px; display: none; text-align: center; line-height: 150px; font-size: 80px; font-weight: 800;border: 1px solid #000;}
.active{background: #555; color: orange;}
</style>
</head>
<body>
<div id="container">
<ul id="tab-nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="tab-con">
<li style="display: block;">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script>
function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}
var tabNavLi = $('tab-nav').getElementsByTagName('li');
var tabConLi = $('tab-con').getElementsByTagName('li');
// alert(tabConLi.length);
for(var i=0; i<tabNavLi.length; i++){
tabNavLi[i].id = i;
tabNavLi[i].onmouseover = function(){
for(var j=0; j=tabNavLi.length; j++){
// alert(tabNavLi[j].innerHTML);
tabNavLi[j].className = '';
tabConLi[j].style.display = 'none';
}
this.className = 'active';
tabConLi[this.id].style.display = 'block';
}
}
</script>
</body>
</html>
jimhu
RachelehcaR