js实现的简洁网页滑动标签菜单效果代码

本文实例讲述了射流研究…实现的简洁网页滑动标签菜单效果代码。分享给大家供大家参考。具体如下：

这里介绍的是一款风格简洁的网页滑动门代码，基于射流研究…和Div CSS实现。滑动门菜单，只需鼠标放上去就切换的菜单，和网页选项卡只是操作形式上的不同而已，滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了，这样换了之后，切换内容需要鼠标点击门菜单才可以。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-div-hd-tab-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题网页滑动门菜单/title style * { list-style-type : none；font-size :12 px文本装饰：无；余量：0划水：0;}.制表符{边距：20px宽度宽度：244px高度：200 px飞越：隐藏；border:1px #AACCEE固体；}.tab _ b { overflow : hiddenmargin :5 px }。菜单{ overflow:hidden}。菜单Li { display : blockfloat : leftisplay :列表项；文本对齐：居中；宽度：60 px背景-颜色： # EDF4fc线高：20 px边框-底部：1px #AACCEE实心；右边框：1px #AACCEE实心；}.菜单阿利{ display:block}。menu _ d {边框-底部：1 px # FFFFFF实心；背景-color : # FFFFFF；}.李。AAA {后台： # FFFFFF边框-底部：0像素# ffffffff实心；}/style/head dyscript language=' JavaScript ' function tab(n){ var len=4；for(var I=1；i=lenI){文档。getelementbyid(' tab _ a ' I)。风格。显示=(I==n’？阻止“:”非文档。getelementbyid(' tab _ ' I ').className=(i==n)？aaa' : '无；} }/script div class=' tab ' ul class=' menu ' id=' menu title ' Li id=' tab _ 1 ' class=' AAA ' a href=' JavaScript : void(0)' ' onclick=' tab(' 1 ')；'新闻/a/Lili id=' tab _ 2 ' a href=' JavaScript : void(0 ')在mouse over=' tab '(2 ')上；'生活/a/Lili id=' tab _ 3 ' a href=' JavaScript : void(0)' '在mouse over=' tab '(' 3 ')上；'滚动/a/Lili id=' tab _ 4 ' a href=' JavaScript : void(0)'在mouse over=' tab '(' 4 ')上；'旅游/a/Li/uldiv class=' tab _ b ' id=' tab _ a1 ' style=' display : block；'国内国际新闻/div class=' tab _ b ' id=' tab _ a2 ' style=' display : none；'本土快乐生活/div class=' tab _ b ' id=' tab _ a3 ' style=' display : none；'适时新闻滚动/div class=' tab _ b ' id=' tab _ a4 ' style=' display : none；'期待完美假日/div/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。