JS实现滑动菜单效果代码(包括tab、Tab、水平效果等 ).

本文讲述了JS实现滑动菜单效果的代码。分享给大家参考。具体如下：

这里实现了一种特殊的效果，将网页中所有的标签滑动门集中到一个网页中。以前有些同志担心同一页安排两个推拉门。请参考这个例子，相信你会找到答案。此外，还有各种方式排列的标签，总有一个会让你满意。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-move-tab-nav-menu-demo-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-严格。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' lang=' zh-CN ' XML : lang=' zh-CN '标题选项卡/titlestyle type='text/css '！-* { margin :0；划水：0;font-size :12 px字体粗细：正常；}.jj { font-weight:bolder！重要；}.box { border-top-color:#c00！重要；}.pr { color:#060！重要；} # tab01 { position:relative宽度宽度：336像素高度：88 px填充-top :15 px；余量：50px飞越：隐藏；} # tab 01 H3 {位置：相对；z索引：2;float : leftheight :14 xpadding :0 7px 0 8px左边距：-1px；边框-左侧左：实心1px # cccborder-右：实心1px # fff文本对齐：居中；背景# fffcursor:pointer指针指针；} #标签01 H3。向上{ height :18 pxpadd :5 px 7px 0 7pxmargin :-6px 0 0 0；border:solid # ccc边框宽度：1 px 1px 0；color : # c00 } # tab 01 div { display : none位置：绝对；left:0top:32pxz索引：1;宽度width :324 px h8 :54 xpadding :5 pxborder : solid 1px # cccccolor : # 666 } # tab 01 div。up { display :块；} # tab02 { position:relative宽度宽度：200 pxmargin :50 pxborder : solid # CCC边框宽度宽度：0 1px 1px} # tab02 h4 {高度：18px行高：18 pxborder:solid # ccc边框宽度：1 px 0；保证金-底部：-1px；文本对齐：居中；背景： # f6f 6；光标：指针指针；} #标签02 H4。up { color : # c00} # tab 02 ol { display : none height :54 xpadding :5 pxcolor : # 666 } # tab 02 ol。up { display :块；} # tab03 { position:relative宽度宽度：100pxmargin:50px} #标签03 H3 {相对位置：z索引：1;height :16 pxpadding-top :4 px；保证金-底部：-1px；border:solid # ccc边框宽度宽度：1px 0 1px 1px文本对齐：居中；字体系列：宋体；背景技术# eeecursor:pointer指针指针；} #标签03 H3。上涨{ z-index :3color: # c00背景# fff} # tab 03 div。选项卡{显示：无；位置：绝对；左侧：99pxtop:0z索引：2;宽度宽度：300像素高度：200 pxpadd :5 pxborder 3360 solid 1px # cccccolor : # 666 } #选项卡03 div。选项卡。up { display :块；}-/style/head dydiv id=' tab 01 ' H3首页/h3 div class='jj'p嘿嘿，无视差异原始班级值/p/div h3类='pr '测试/h3 divp继续无视h3原始班级值/p/div h3无聊/h3 divph3没有值也可以~/p/div h3 class='box '傻蛋/h3 divpdiv没有值一样可以~/p/div/divdiv id='tab02' h4首页/h4 ol class='pr'li嘿嘿，无视容器原始班级值/li/ol h4 class='box '测试/h4 olli继续无视h3原始班级值/li/ol h4无聊/h4 ollih3没有值也可以~/li/ol h4类='bb '傻蛋/h4奥利夫没有值一样可以~/li/ol/divdiv id='tab03' h3首页/h3 div class='tab'p嘿嘿，无视h3原始班级值/p/div h3测试/h3 div class='tab wushi'p继续无视差异原始班级值/p/div h3无聊/h3 div class='tab'ph3没有值也可以~/p/div h3 class='box '傻蛋/h3 div class='tab tab123'pclass值相似一样也可以~/pdivp指定班级后，即时再多一个差异也行。

/p/div/div脚本类型='text/javascript '！-函数Pid(id，标记){ if(！标记){返回文档。getelementbyid(id)；} else {返回文档。getelementbyid(id ).getElementsByTagName(标记);} }函数选项卡(id，hx，box，iClass，s，pr){ var hxs=Pid(id，hx)；var boxs=Pid(id，box)；if(！iClass){ //如果不指定同学们，则：Boxscalass=Boxs//直接使用包厢作为容器} else{ //如果指定同学们，则：var Boxscalass=[]；for(I=0；ibox s .长度；I){ if(box[I]。类名。匹配(/\ btab \ b/)} {//判断容器的班级匹配boxscalss。push(box[I])；} } } if(！pr){ //如果不指定预展开容器，则：go _ to(0)；//默认展开序列YY()；} else { go _ to(pr)；YY()；}函数YY(){ for(var I=0；ihxs . lentigi){ hxs[I].temp=I；if(！s){//如果不指定事件，则：s=' onmouseover//使用默认事件hxs[I][s]=function(){ go _ to(this。temp)；} } else { hxs[I][s]=function(){ go _ to(this。temp)；} } } }函数go _ to(pr){ for(var I=0；ihxs.lengthi ){ if(！hxs[i].tmpClass){ hxs[i].tmpClass=hxs[i].类名=boxscalass[I].tmp class=Boxscalass[I].如果(pr==i){ hxs[i].类名=' up//展开状态：标题盒式磁带.类名=' up//展开状态：容器} else { hxs[i].className=hxs[i].tmpClassboxscalass[I].类名=Boxscalss[I].tmpClass } } } }选项卡(' tab01 '，' h3 '，' div '，'，' onclick '，2)；制表符(' tab02 '，' h4 '，' ol ')；制表符(' tab03 '，' h3 '，' div '，' tab ')；/////脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。