一、實現(xiàn)原理：
使用定時器和排他思想完成
二、代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0}
ul,li{list-style: none;}
.main{ width: 400px; height: 50px; float: left; margin-top: 10px; margin-bottom: 10px; }
.main ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer; border: 1px solid #f2f2f2;box-sizing: border-box;}
.main ul li.active{ background:orange; color: #fff; }
.item{display: none; width: 400px; height: 50px;font-size: 12px; line-height:50px; overflow: hidden;clear: both; background: #f2f2f2;}
.item ul li{display: block;float: left; width: 100px; height: 50px;line-height: 50px; text-align: center; font-size: 12px; cursor: pointer;}
.item ul li:hover{ background:blue; color: #fff; }
</style>
</head>
<body>
<div class="main">
<ul>
<li>首頁</li>
<li>關(guān)于我們</li>
<li>企業(yè)資訊</li>
<li>人才招聘</li>
</ul>
</div>
<div class="item">
<ul>
<li>選項1</li>
<li>選項2</li>
<li>選項3</li>
</ul>
</div>
<div class="item">
<ul>
<li>我們1</li>
<li>我們2</li>
<li>我們3</li>
</ul>
</div>
<div class="item">
<ul>
<li>企業(yè)1</li>
<li>企業(yè)2</li>
<li>企業(yè)3</li>
</ul>
</div>
<div class="item">
<ul>
<li>招聘1</li>
<li>招聘2</li>
<li>招聘3</li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var mainlis = document.querySelector('.main').querySelectorAll('li');
var items = document.querySelectorAll('.item');
var timer = null;
for (var i = 0; i < mainlis.length; i++) {
mainlis[i].index = i;
mainlis[i].onmouseover = function(){
clearTimeout(timer);
//排他思想，把所有的li去掉當(dāng)前狀態(tài) 把所有的item隱藏
for (var j = 0; j < mainlis.length; j++) {
mainlis[j].className = '';
items[j].style.display = 'none';
}
this.className = 'active';
items[this.index].style.display = 'block';
}
items[i].onmouseover = function(){
clearTimeout(timer);
}
mainlis[i].onmouseout = items[i].onmouseout = hide;
}
function hide(){
timer = setTimeout(function(){
for (var j = 0; j < mainlis.length; j++) {
items[j].style.display = 'none';
mainlis[j].className = '';
}
},300)
}
}
</script>
</body>
</html>
