您的位置：首页 > 其它

可延迟的选项卡切换

2015-07-30 19:22 239 查看
带有一些延迟的选项卡效果更佳

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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}
.notice{
height:98px;
width:298px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position:relative;
}
.notice-tit ul{
list-style:none;
position:absolute;
width:301px;
left:-1;
}
.notice-tit ul li{
float:left;
width:58px;
height:26px;
padding:0 1px;
text-align:center;
line-height:26px;
overflow:hidden;
background:#F7F7F7;
border-bottom:1px solid #eee;
}
.notice-tit ul li.select{
background:#fff;
border-bottom-color:#fff;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
}
.notice ul li a:link,.notice ul li a:visited{
text-decoration:none;
color:#000;
}
.notice ul li a:hover{
color:#f90;
}
.notice-con .mod{
margin:10px 15px;
}
.notice-con .mod ul li{
float:left;
width:134px;
height:25px;
overflow:hidden;
}
</style>
<script>
function $(id){
return typeof id === 'string'?document.getElementById(id):id;
}
window.onload = function(){
//标签索引
var index = 0;
var timer = null;
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles=$('notice-tit').getElementsByTagName('li');
divs=$('notice-con').getElementsByTagName('div');
if(titles.length != divs.length)
return;
//遍历titles下的所有li
for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onmouseover=function(){
var that = this;
//如果存在准备执行的定时器，立刻清除，只有当前停留5时间大于500ms时，才开始执行
if(timer){
clearTimeout(timer);
timer = null;
}
//延迟半秒
timer = window.setTimeout(function(){
//清除li上的class
for(var j=0;j<titles.length;j++){
titles[j].className='';
divs[j].style.display = 'none';
}
//设置当前高亮显示
titles[that.id].className='select';
divs[that.id].style.display = 'block';
},500);
}
}
}
</script>
</head>

<body>
<div id="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<ul>
<li class="select"><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">简介</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con" >
<div class="mod" style="display:block">
<ul>
<li><a href="#">编写菜单效果1</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果2</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果3</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果4</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li><a href="#">编写菜单效果5</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
<li><a href="#">编写菜单效果</a></li>
</ul>
</div>

</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航