本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：
这款仿Windows风格的选项卡，带有灰色的立体感，示例内容是用JS控制输出，只是为了演示功能，你在用的时候完全可以去掉的。
运行效果截图如下：
在线演示地址如下：
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/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>选项卡</title> <style type="text/css"> body{ background-color:#CCC; } .tab{ margin:0; padding:0; position:absolute; } .tab li{ float:left; list-style:none; } .tab li span{ float:left; display:block; height:20px; line-height:20px; position:relative; border-style:solid; border-width:1px 1px 0 1px; border-color:#EEE #999 #777 #DDD; background-color:#CCC; margin:1px 2px 0 0; padding:0 5px 0 5px; font-size:12px; cursor:pointer; z-index:1; } .tab li div{ display:none; position:absolute; top:22px; left:0px; background-color:#CCC; border:1px solid; border-color:#EEE #999 #777 #DDD; text-align:center; overflow:auto; } .tab li.selected span{ margin-top:0; height:22px; } .tab li.selected div{ display:block; } </style> <script type="text/javascript"> function CreateTab(tab_width,tab_height,parent_obj){ var newtab=document.createElement("UL"); newtab.className="tab"; parent_obj.appendChild(newtab); Tab.call(newtab); newtab.style.width=tab_width+"px"; newtab.style.height=tab_height+"px"; return newtab; } function Tab(){ var this_tab=this; this.selected_page; this.page_names=new Array(); this.page_contents=new Array(); this.Select=function(){ this_tab.selected_page.className=""; this.className="selected"; this_tab.selected_page=this; } this.NewPage=function(page_name){ var newpage=document.createElement("LI"); newpage.onclick=this.Select; newpage.innerHTML="<span>"+page_name+"</span><div></div>"; this.appendChild(newpage); newpage.lastChild.style.width=parseInt(this.style.width)-2+"px"; newpage.lastChild.style.height=parseInt(this.style.height)-24+"px"; this.page_names.push(newpage.firstChild); this.page_contents.push(newpage.lastChild); return newpage; } this.SetChecked=function(page_index){ if(page_index>-1&&this.childNodes.length>page_index){ this.selected_page=this.childNodes[page_index]; this.selected_page.className="selected"; } } } </script> </head> <body> <script type="text/javascript"> var newtab=CreateTab(400,300,document.body); newtab.NewPage("第一页"); newtab.NewPage("第二页"); newtab.NewPage("第三页"); newtab.NewPage("第四页"); newtab.NewPage("第五页"); newtab.SetChecked(0); newtab.style.top="100px"; newtab.style.left="200px"; for(var i=0;i<newtab.childNodes.length;i++){ newtab.page_contents[i].innerHTML=function(number){ var content_str=""; for(var n=0;n<1;n++){ content_str+="<br />---------------这是第"+number+"页---------------"; } return content_str; }(i+1); } </script> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
【JS实现仿Windows经典风格的选项卡Tab切换代码】相关文章：
★ 强制设为首页代码