javascript tab 实例代码
日期：2014-05-16 浏览次数：20468 次
盗用以前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>
?
