完美实现射流研究…选项卡切换效果（一)

本文实例为大家分享了射流研究…选项卡切换的具体代码，可以手动切换，另设置定时器可使其自动切换，供大家参考，具体内容如下

效果如图：

具体代码：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title/head style type=' text/CSS ' * { margin : 0；padd : 0；font-size : 12px字体系列： '微软雅黑；color: # 000000文本装饰：无；列表样式类型：无；} # tab-list { width : 275 px；高度： 190像素；余量： 30px自动；} # list { height: 32px边框-bottom: #8B4513 2px实心；} #列表李{显示：行内块；宽度： 60pxborder: 1px固体# 999999;边框-底部：无；线高： 30px左边距左： 5px文本对齐：中心；光标：指针；} #列表。活动{ border-top: 2px实心# 8b 4513边框-底部： 2px实心# fff} # tab-list div {边框： 1px实心# 7396 B8边框-顶部：无；} # tab-list div Li {高度： 30px线高： 30px文本-缩进： 8px} #标签列表。显示{显示：块；} #标签列表。隐藏{ display: none}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var tab=document。getelementbyid(' tab-list ')；var列表=文档。getelementbyid(' list ').getElementsByTagName(' Li ')；var div=tab。getelementsbytagname(' div ')；定义变量计时器=nullvar索引=0;for(var I=0；ilist.lengthi ){ list[i].num=I；清单[i].onmouseover=function(){ Change(this。num)；} }函数change(Curindex){ for(var I=0；ilist.lengthi ){ list[i].类名=div[i].' className='隐藏；}列表[curIndex].activediv[curIndex].class name=' show index=Curindex }//自动播放函数autoPlay(){ timer=setInterval(函数(){ indexif(索引列表。length-1){ index=0；}变更（索引);},2000);} autoPlay()；选项卡。onmouseover=function(){ clearInterval(计时器);}选项卡。onmouseout=function(){ autoPlay()；} }/scriptbodydiv id=' tab-list ' ul id=' list ' Li class=' active '房产/莉莉家居/莉莉二手房/Li/ul div class=' show ' ul lia href=' JavaScript :'275万购昌平邻铁三居总价20万买一居/a/Li lia href=' JavaScript :'200万内购五环三居140万安家东三环/a/Li lia href=' JavaScript :'北京首现零首付楼盘53万购东5环50平/a/Li lia href=' JavaScript :'京楼盘直降5000 中信府公园楼王现房/a/Li/ul/div class=' hidden ' ul lia href=' JavaScript 3:'40平出租屋大改造美少女的混搭小窝/a/Li lia href=' JavaScript :'经典清新简欧爱家90平老房焕发新生/a/Li lia href=' JavaScript :'新中式的酷色温情66平撞色活泼家居/a/Li lia href=' JavaScript :'瓷砖就像选好老婆卫生间烟道的设计/a/Li/ul/div class=' hidden ' ul lia href=' JavaScript 3:'通州豪华3居260万二环稀缺2居250w甩/a/Li lia href=' JavaScript :'西3环通透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如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总jquery选项卡操作方法汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。