javascript tab 实例代码【原创】

盗用以前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>

 

你可能感兴趣的:(JavaScript,html,XHTML)