JS实现仿Windows经典风格的选项卡Tab切换代码

时间：2021-05-26

本文实例讲述了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章