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>