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

2019-11-20 11:26:34

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考，具体如下：

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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程序设计有所帮助。

上一篇：基于jQuery实现的扇形定时器附源码下载

下一篇：JavaScript实现的简单烟花特效代码