TAB tab delay Toggle Effect JS Implementation

Try.html

<! DOCTYPE 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;    Get the mouse slide over or click on the label and the element to toggle content 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 () {//Use this variable to refer to the currently sliding Li var that=this;                If there is a timer ready to execute, clear immediately, only if the current dwell time is greater than 500ms to start the execution if (timer) {cleartimeout (timer);            Timer=null;                    }//Delay half-second execution 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); }    }}
　Effect:
2017-09-05 20:32:11
TAB tab delay Toggle Effect JS Implementation