本文实例讲述了射流研究…实现仿Windows操作系统操作系统经典风格的选项卡标签切换代码。分享给大家供大家参考，具体如下：

这款仿Windows操作系统操作系统风格的选项卡，带有灰色的立体感，示例内容是用射流研究…控制输出，只是为了演示功能，你在用的时候完全可以去掉的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-windows-style-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；字符集=GB 2312/标题选项卡/title style type=' text/CSS ' body {底色： # CCC}.制表符{边距：0划水：0;位置：绝对；}.tab Li { float : left list-style : none；}.选项卡li span { float:left显示：块；高度：20 px线高：20 px位置：相对；边框式：实心；边框宽度宽度：1px 1px 0 1px边框颜色： # EEE # 999 # 777 # DDD；背景-颜色： # CCCmargin :1 px 2px 0 0 padd :0 5px 0 5px font-size :12 px；光标：指针指针；z索引：1;}.选项卡li div { display:none位置：绝对；top :22 ppxleft :0 px背景-颜色： # CCCborder:1px固体；边框颜色： # EEE # 999 # 777 # DDD；文本对齐：居中；飞越：汽车；}.tab li。选定范围{ margin-top :0；高度：22px}。选项卡李。选定的div {显示：块；}/style脚本类型=' text/JavaScript '函数CreateTab(tab _ width，tab_height，parent _ obj){ var new tab=document。create element(' UL ')；新标签页。类名=' tabparent _ obj。appendchild(新选项卡)；选项卡。呼叫(新标签)；新标签页。风格。width=tab _ width ' px新标签页。风格。height=tab _ height ' px返回newtab}函数Tab(){ var this _ Tab=this；this.selected _ pagethis。page _ name=new Array()；这个。page _ contents=new Array()；这个选择=函数(){ this _ tab。选定的页面。类名=' '；this . class name=' selected this _ tab . selected _ page=this }这个新页面=函数(page _ name){ var new page=文档。创建元素(“LI”)；newpage.onclick=this .选择；新页面。innerHTMl=' span ' page _ name '/span div/div '；这个。appendchild(新页面)；新页面。LastChild。风格。width=ParSeint(这个。风格。宽度)-2 ' px；新页面。LastChild。风格。height=ParSeint(这个。风格。高度)-24 ' px；这个。page _ names。推送(新页面。第一个孩子)；这个。页面内容。推送(新页面。last child)；返回newpage}这个setChecked=function(page _ index){ if(page _ index-1 this。子节点。长度page _ index){ this。selected _ page=this。child nodes[page _ index]；这个。选定的页面。类名=“选定”；} } }/script/head dyscript type=' text/JavaScript ' var new tab=create tab(400，300，document。身体)；新标签.新页面('第一页');新标签.新页面('第二页');新标签.新页面('第三页');新标签.新页面('第四页');新标签.新页面('第五页');新标签.SetChecked(0)；新标签页。风格。top=' 100 px新标签页。风格。左侧=' 200 pxfor(var I=0；inewtab。子节点。长度；i ){ newtab.page_contents[i].innerHTML=function(number){ var content _ str=' '；for(var n=0；n1；n ){ content_str='br/-这是第数字'页- ';}返回content _ str }(I ^ 1)；}/脚本/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。