tab选项卡切换效果（二）——延迟切换

来源：互联网发布：php学生选课管理系统编辑：程序博客网时间：2024/06/16 04:52

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>

0 0