JS实现黑色风格的网页拉环选项卡效果代码

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

这是一款网页拉环选项卡射流研究…代码，黑色超酷的风格，看了后你会喜欢的，很熟悉很经典的风格，似曾相识的感觉，希望大家喜欢。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/

具体代码如下：

！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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleTab切换/title脚本类型=' text/jscript '函数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 style type=' text/CSS ' * { margin :0 px；padding:0pxlist样式的： none}.主{宽度：306px高度：299 pxfloat : leftmargin :300 pxdisplay : inline背景技术： # 000;padding:3px }。主要的。菜单{ width :306 pxh three :31 px飞越：隐藏；float:left}。主要的。菜单跨度{宽度：60像素高度：30 px线高：30 px飞越：隐藏；文本对齐：居中；float : leftmargin 3 33601 px 0 0 1 px；背景技术： # 333;color : # bcbcfont-weight :加粗；光标：指针指针；font-size :12 px}.主要的。菜单。悬停{背景： # 666 color : # FFF；}.主要的。内容{ width:304px高度：266 px飞越：隐藏；float : leftmargin :1 pxmargin-top :0 px；显示：内联背景： # 333333;}.主要的内容分区{ width:304px高度：266 px行高：266 px文本对齐：居中；color : # fffffont-weight :加粗；背景技术： # 666;}/style/head dydiv class=' main ' div class=' menu ' span id=' one 1 ' onclick=' setTab '(one，1，5)' class='hover '菜单一/span span id=' one 2 ' onclick=' SetTab '(one，2，5)菜单二/span span id=' one 3 ' onclick=' SetTab '(one，3，5)菜单三/span span id=' one 4 ' onclick=' SetTab '(one，4，5)菜单四/span span id=' one 5 ' onclick=' SetTab '(one，5，5)菜单五/span/div class=' content ' div id=' con _ one _ 1 '内容一/div div id=' con _ one _ 2 ' style=' display : none '内容二/div div id=' con _ one _ 3 ' style=' display : none '内容三/div div id=' con _ one _ 4 ' style=' display : none '内容四/div div id=' con _ one _ 5 ' style=' display : none '内容五/div /div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。