Tab選項卡 延遲切換效果js實現
阿新 • • 發佈：2017-09-05
ext 0ms 分享 規則 .get 內容 char out try
try.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="try.css">
<script type="text/javascript" src="try.js"></script>
</head>
<body>
<div id="notice" class="notice">
<div class="notice-tit" id="notice-tit">
<ul>
<li><a href="#">公告</a></li>
<li><a href="#">規則</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">安全</a></li>
<li class="select"><a href="#">公益</a></li>
</ul>
</div>
<div id="notice-con" class="notice-con">
<div class="mod" style="display: none;">
<ul>
<li><a href="#">張勇：玩快樂足球</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><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：要玩快樂足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">張勇：玩快樂足球</a></li>
</ul>
</div>
<div class="mod" style="display: none;">
<ul>
<li><a href="#">張勇：要玩快樂</a></li>
<li><a href="#">張勇：要玩快樂足球</a></li>
<li><a href="#">張勇：要玩快樂足球</a></li>
<li><a href="#">張勇：要玩快樂足球</a></li>
</ul>
</div>
<div class="mod" style="display: block;">
<ul>
<li><a href="#">張勇：要玩快樂</a></li>
<li><a href="#">張勇：要玩快樂足球</a></li>
<li><a href="#">張勇：要玩快樂足球</a></li>
<li><a href="#">張勇：要玩快樂</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
try.css
*{
margin: 0;
padding:0;
list-style: none;
font-size: 12px;
}
.notice{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-tit{
height: 27px;
position: relative;
background-color: #f7f7f7;
}
.notice-tit ul{
position: absolute;
width: 301px;
left: -1px;
}
.notice-tit ul li{
float: left;
width: 58px;
height: 26px;
text-align: center;
line-height: 26px;
overflow: hidden;
padding: 0 1px;
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;
font-weight: bolder;
}
.notice li a:link,.notice-tit li a:visited{
text-decoration: none;
color: #000;
}
.notice li a:hover{
color: #f90;
}
.notice-con .mod{
margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
try.js
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‘);
var divs =$(‘notice-con‘).getElementsByTagName(‘div‘);
// alert(divs.length);
if(titles.length!=divs.length)
return;
for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onmouseover=function(){
// 用that這個變量來引用當前滑過的li
var that=this;
// 如果存在準備執行的定時器，立刻清除，只有當前停留時間大於500ms時才開始執行
if(timer){
clearTimeout(timer);
timer=null;
}
// 延遲半秒執行
timer=window.setTimeout(function(){
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);
}
}
}
效果：
2017-09-05 20:32:11
Tab選項卡 延遲切換效果js實現