盗用以前21cn同事开发的一个tab实例来分享啊哈哈~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* { margin:0; padding:0; border:0; list-style:none;}
body { font-size:12px; font-family:arial;}
ul { overflow:hidden; height:1%}
li { float:left; line-height:25px; padding:0 12px; text-transform:capitalize; cursor:pointer;}
li.on { background:#aaa; color:#fff}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="on">james</li>
<li>anthony</li>
<li>bryant</li>
</ul>
<div style="height:100px; background:pink;"></div>
<div style="height:100px; background:green;"></div>
<div style="height:100px; background:orange;"></div>
</div>
<script>
function test(){
var timer = 400;
var obj = document.getElementById('tabs').getElementsByTagName('li');
var div = document.getElementById('tabs').getElementsByTagName('div')
for(var i=0; i<div.length; i++){
if(i != 0){
div[i].style.display = 'none'
}
}
var len = obj.length;
for(var i=0; i<len; i++){
handler(obj[i],i)
}
function handler(list,index){
list.onmouseover = function(){
out = setTimeout(function(){
tabs(index) },timer);
}
list.onmouseout = function(){
clearTimeout(out)
}
}
function tabs(index){
for(var i=0; i<div.length; i++){
var divs = div[i],objs = obj[i];
if(i == index){
divs.style.display = 'block'
objs.className = 'on'
}
else {
divs.style.display = 'none';
objs.className = ''
}
}
}
}
test()
</script>
</body>
</html>