<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟选项卡</title>
<style>
#box {
width: 250px;
margin: 10px auto;
text-align: center;
}
#box div {
border: 1px solid black;
width: 180px;
height: 180px;
margin: 0px auto;
display: none;
}
#box div.active {
display: block;
}
#box button.active {
background: blue;
}
</style>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName('button');
var oBox = document.getElementById('box');
var aDiv = oBox.getElementsByTagName('div');
aDiv[0].className='active';
aBtn[0].className='active';
var timer;
for (var i = 0;i < aBtn.length;i++)
{
aBtn[i].index = i;
aBtn[i].onmouseout = function ()
{
clearTimeout(timer);
};
aBtn[i].onmouseover = function ()
{
var _this = this;
timer = setTimeout(function()
{
for (var j = 0;j < aBtn.length;j++)
{
aBtn[j].className = '';
aDiv[j].className = '';
}
_this.className = 'active';
aDiv[_this.index].className = 'active';
},500);
};
}
};
</script>
</head>
<body>
<div id="box">
<button>111</button>
<button>222</button>
<button>333</button>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
</html>
