tab选项卡切换效果(二)——延迟切换

时间:2022-12-26 16:38:10

tab选项卡切换效果(二)——延迟切换tab选项卡切换效果(二)——延迟切换

JS代码如下:

<script>
function $(id){
return typeof id==='string'?document.getElementById(id):id; //封装$简化代码
}
window.onload=function() {
//标签的索引
var timer = null;
var titles = $('notice_tit').getElementsByTagName('li');
var divs = $('notice_con').getElementsByTagName('div');
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=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);
}
}
}
</script>