js标签切换效果的完美实现(2)

这个例子分享了js标签切换的具体代码，供大家参考。具体内容如下

通过设置一个延时为0.5s的定时器来切换，一个重要的技巧是定义一个变量来存储当前指针。

这里不能直接引用这个的原因是setTimeout是一个window对象，用这个的时候会指向一个timer，所以前面要定义一个变量。在调用计时器之前，还要注意确定是否有准备好要执行的计时器。

效果如下：

特定代码：

！doctype html html headlang=' en ' metacarset=' utf-8 ' title延迟切换/title style type=' text/CSS ' * { margin : 0；padd : 0；Font:普通12px '微软雅黑'；color: # 000000} ul { list-style-type : none；} a { text-decoration : none；} # tab-list { width : 275 px；高度： 190像素；margin: 20px自动；} # ul1 { border-bottom : 2px solid # 8b 4513；height: 32px} # ul1 Li { display : inline-block；宽度： 60px；线高： 30px；文本对齐：中心；border: 1px固体# 999；border-bottom:无；左边距left: 5px} #ul1 li:hover{cursor:指针；} # ul1 Li . active { border-top : 2px solid # 8b 4513；border-bottom : solid 2px # ffffff；} # tab-list div { border : 1px solid # 7396 B8；border-top:无；} # tab-list div Li { height : 30px；线高： 30px；text-indent : 8px；} .显示{ display:块；}.隐藏{ display: none}/style script type=' text/JavaScript ' window . onload=function(){ var ul1=document . getelementbyid(' ul1 ')；var AlI=ul1 . GetElementsBytagname(' Li ')；var oDiv=document . getelementbyid(' tab-list ')；var ADiv=Odiv . GetElementsBytagname(' div ')；var计时器=nullfor(var I=0；i=aLi.lengthi ){ aLi[i]。id=I；aLi[i]。onmouseover=function(){ var=this；//使用变量来引用当前滑动李。//如果有要执行的定时器，立即清除，只有当前停留时间大于500ms(表示生成的定时器要在鼠标快速滑过一个的瞬间清除)if(timer){ cleartime out(timer)；timer=null}//执行timer=window . settimeout(function(){ for(var I=0；iaLi.lengthi ){ aLi[i]。className=aDiv[i]。className=' hide}即. that.className=' active//这里不能直接引用这个的原因是setTimeout是一个window对象，使用这个的时候会指向一个定时器，所以是一个变量aDiv[that.id]。应该在它前面定义“show”。},500);} } }/script/head dydiv id=' tab-list ' ul id=' ul1 ' Li class=' active ' real estate/Lili home/Lili二手房/Li/ul div ullia href=' JavaScript 3360；'275万元买昌平铁路附近三套房子，总价20万元买一套房子/a/Li lia href=' JavaScript :'200万国内购买五环、三个住宅和140万国内东三环/a/Li lia href=' JavaScript :'北京首套零首付房产53万元，东五环50个单位/a/Li lia href=' JavaScript :北京房地产直降中信园大厦5000套现房/A/Li/ul/div=' hide ' ul lia href=' JavaScript :'40平出租屋，大规模翻新美少女混搭窝/a/Li lia href=' JavaScript :经典而清新，简爱90平的老房子焕然一新新中式冷色暖色66平对比色活泼家居/a/Li lia href=' JavaScript :'瓷砖就像选择一个好妻子的浴室烟道设计/a/Li/ul/div div class=' hide ' ul lia href=' JavaScript :'通州豪华3房260万二环稀缺2房250 w/a//a/Li lia href=' JavaScript :'西三环连接2户，290万，130万，2户限量抢购。/a/Li lia href=' JavaScript :'皇城根小学学区才260万，121平，70万抛！/a/Li lia href=' JavaScript :独享别墅280万苏州桥2居室优惠价格248万/a/li /ul /div/div/body/html以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。