<!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>