JS实现不规则拉环选项卡效果代码

本文实例讲述了射流研究…实现不规则拉环选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款不规则拉环选项卡效果，将中规中矩的方角换成了不规则的圆角，也就是这一换，倒让浏览者新鲜了不少，也使选项卡增多了几份灵感，不是吗？

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

html health eta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题不规则拉环选项卡效果/titlestyle type='text/css '！- body，TD { font-size : 12px}.tab {页边距-顶部：100 px } # TabCon1 {宽度：212 px高度：100 px线高：100 px边框-左侧：#757575 1px实心；边框-底部：#757575 1px实心；右边框：#757575 1px实心；} # TabCon2 { width:212px高度：100 px线高：100 px边框-左侧：#757575 1px实心；边框-底部：#757575 1px实心；右边框：#757575 1px实心；} .Xixi 1 { width :212 px高度：29 px行高：29 px背景-image : URL(images/news _ BG悬停1。gif)；光标：指针指针；} .Xixi 2 { width :212 px高度：29 px行高：29 px背景图像： URL(图像/新闻_ BG悬停2。gif)；光标：指针指针；} .选项卡1 {宽度：96 px高度：29 px行高：29 pxfloat:left文本对齐：居中；光标：指针指针；颜色： # FFF；} .选项卡2 {宽度：116 px高度：29 px行高：29 pxfloat:left文本对齐：居中；光标：指针指针；color : # 000 }-/style/head body style=' text-align : center '脚本类型=' text/JavaScript '函数settab 03 syn(I){ selecttab 03 syn(I)；}功能选择选项卡03 syn(I){ switch(I){ case 1:文档。getelementbyid(' TabCon1 ')。风格。display=' block文件。getelementbyid(' TabCon2 ')。风格。显示='无'；文件。getelementbyid(' font 1 ')。风格。color=' # ffffff文件。getelementbyid(' font 2 ')。风格。color=' # 000000打破；案例2:文件。getelementbyid(' TabCon1 ')。风格。显示='无'；文件。getelementbyid(' TabCon2 ')。风格。display=' block文件。getelementbyid(' font 1 ')。风格。color=' # 000000文件。getelementbyid(' font 2 ')。风格。color=' # ffffff打破；} }/script div class=' tab ' div id=' BG ' class=' Xixi 1 ' div id=' font 1 ' class=' tab 1 ' onMouseOver=' settab 03 syn(1)；document.getElementById('bg ').className='xixi1 ' '新闻标签/div div id=' font 2 ' class=' tab 2 ' onMouseOver=' settab 03 syn(2)；document.getElementById('bg ').className='xixi2 ' '新闻标签/div/divdiv id='TabCon1 '不规则拉环选项卡效果/div div id=' TabCon2 ' style=' display : none '不规则拉环选项卡效果2/div/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。