JS封装的选项卡拉环切换效果示例

本文实例讲述了射流研究…封装的选项卡拉环切换效果。分享给大家供大家参考，具体如下：

！DOCTYPE HTMl HTMl lang=' en-US ' hearta charset=' UTF-8 ' title js封装的选项卡拉环代码/title style type=' text/CSS ' * { padd :0；margin:0}。块{ display:block}。无{ display:none}#wrap，# wraps { width:500px高度：230 px飞越：隐藏；余量：50px汽车；}#diya，# diya { list-style : none；}#diya li，# diyas li { width:66px高度：28 pxborder:1px实心# 09C文本对齐：居中；行高：28 pxfloat:leftcursor:pointer指针指针；右边距：3 px} # diyas Li :悬停{后台： # CCC}#diya li.on，#diya li。在{背景： # 9 C3；} #换行div，#换行div { width:498px高度：198 pxborder:1px固体# 000;}/style/head dydiv id=' wrap ' ul id=' diya ' Li class=' on '第一项/莉莉第二项/莉莉第三项/Li/ulbr clear=' all '/div class=' block '第一部分/divdiv class='none '第二部分/divdiv class='none '第三部分/div/div div id=' wrapps ' ul id=' diyas ' Li class=' on '第一项/莉莉第二项/莉莉第三项/Li/ulbr clear=' all '/div class=' block '第一部分/divdiv class='none '第二部分/divdiv class='none '第三部分/div/div/body/html脚本类型=“text/JavaScript”选项卡(“环绕”、“diya”、“鼠标悬停”)选项卡(“环绕”、“diya”)函数选项卡(wrap，navul，eve){//tab效果封装，目前只有两种变换方式，一种为点击事件点击（也是默认事件),另外一种为鼠标移过事件将鼠标放在var div s=文档上。GetElementByID(换行)。getElementsByTagName(' div ')；var lis=文档。getelementbyid(nav ul).getElementsByTagName(' Li ')；for(var I=0；长度；i ){lis[i].indx=I；if(eve==' click ' | | eve==null){ lis[I].onclick=function(){ for(I=0；长度；i ){ lis[i].className=divs[i].none ' this . NAmE=' ondiv[this . indx].类名=' block} } } else if(eve=='鼠标悬停'){ lis[I].onmouseover=function(){ for(I=0；长度；i ){ lis[i].className=divs[i].无此.无此.无此.无此.无此.无此.无此.无此.无此.类名=' block } } } } } } }/script运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。