js实现类似菜单风格的拉环选项卡效果代码

本文实例讲述了射流研究…实现类似菜单风格的拉环选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款基于爪哇岛描述语言实现的一组简洁选项卡代码，类似菜单风格的拉环选项卡，没有使用图片，因此有些地方处理的还不太到位，不介意使用图片修饰的朋友可以再次美化这上选项卡，风格有点类似于菜单。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/

具体代码如下：

html xmlns=' http://www。w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题一组简洁选项卡代码/titlestyle type='text/css '！-车身，div，ul，li { padding:0margin:0文本对齐：居中；}body{font:12px '宋体；文本对齐：居中；}a:link，a:visited { color: # 00F文本装饰：无；}a:hover，a:active { color: # c00文本修饰：下划线；} ul { list-style :无；}.box { margin :1 em auto } br { clear : both }/*菜单class*/.Menubox { width:960px背景# eff8 feborder-bottom :2 px # 9 bcff 7实心；高度：36 px线高：36 px边框-顶部：无；}.Menubox li { float:left显示：块；光标：指针指针；宽度宽度：114 pxborder-right :0 px # cccccccc实心；文本对齐：居中；color : # 0099 cc font-weight : bold；font-size :14 px边框-top: 2px实心# 98d0f7border-right: 2px实心# 98d0f7}。李。悬停{背景： # fff宽度宽度：116pxborder:2px实心# 98d0f7border-bottom:0px实心# fffcolor : # DC 0004 font-weight : bold；高度：36 px线高：36 pxfont-size :14 px右边框： 2px实心# 98d0f7边框-左侧：无；}.李。out { border-top :1 px # cccccc solid；}.content box { width :956 pxclear : both border 33602 px实心# 98d 0f 7 border-top :0；高度：150 px线高：150 px文本对齐：居中；填充-top :8 px；}.content box span { color : # CCC }-/style script语言=' JavaScript '类型=' text/JavaScript '！-函数setTab(name，cursel，n){ for(I=1；I=n；I){ var menu=document。getelementbyid(名称(一)；var con=文档。getelementbyid(' con _ ' name ' _ ' I)；menu.className=i==cursel '？悬停":";con.style.display=i==cursel '？block ' : ' none } }/////script/head dydiv class=' box '！-点击切换1 begin-div class=' Menubox ' ulli style=' color : # 000000；宽度：180像素请选择支付方式/Li Li id=' two 1 ' OnClick=' SetTab '(two，1，4)' class='hover '连心卡/Li Li id=' two 2 ' OnClick=' SetTab '(two，2，4)储蓄卡/Li Li id=' two 3 ' OnClick=' SetTab '(two，3，4)信用卡/Li Li id=' two 4 ' OnClick=' SetTab '(two，4，4)消费卡/Li/ul/div class=' Contentbox ' p id=' con _ two _ 1 '标题列表1span(点击切换)/span/p p id=' con _ two _ 2 ' style=' display :无标题列表2span(点击切换)/span/p p id=' con _ two _ 3 ' style=' display : none '标题列表3span(点击切换)/span/p p id=' con _ two _ 4 ' style=' display : none '标题列表4span(点击切换)/span/p/divbr //div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。