![自動簡易選項卡]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自動簡易選項卡</title>
<style type="text/css">
*{padding: 0px;margin: 0px;list-style: none;}
#div1 ul{
display: inline-block;
}
li{
float: left;border: 1px solid #ccc;width: 60px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;
}
#div1 div{
width: 245px;height: 100px;background: pink;display: none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv1 = document.getElementById('div1');
var aLi = oDiv1.getElementsByTagName('li');
var aDiv = oDiv1.getElementsByTagName('div');
var timer=null;
var num=0;
var len=aLi.length;
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].οnmοuseοver=function(){
clearInterval(timer);
num=this.index;
set_attr();
}
aLi[i].οnmοuseοut=function(){
autoplay();
}
}
function set_attr(){
for(var i=0;i<aLi.length;i++){
aLi[i].style.background = '';
aDiv[i].style.display='none';
}
aLi[num].style.background = 'red';
aDiv[num].style.display='block';
}
function autoplay(){
timer= setInterval(function(){
set_attr();
num=(++num)%len;
},1000)
}
autoplay();
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li>教育</li>
<li>培訓</li>
<li>工作</li>
<li>生活</li>
</ul>
<div>教育是asdhjk</div>
<div>培訓是asdhjk</div>
<div>工作是asdhjk</div>
<div>生活是asdhjk</div>
</div>
</body>
</html>
