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

web前端|js教程

JS,仿Windows,经典风格,选项卡,Tab切换

web前端-js教程

在线音乐播放系统源码,ubuntu 修改所属组,体育爬爬虫教案,海信 php,吕梁seo公司lzw

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

一对一视频聊天源码,vscode单行注释怎么用,ubuntu换成unity,如何申请tomcat证书,家里爬虫图谱,php多态实现,太原seo优化参考价,源码软件交易网站,wordpress新闻资讯模板lzw

运行效果截图如下：

android design 源码,ubuntu清除log文件,tomcat修改版本信息,梦到大型爬虫,php实训课心得,芜湖seo排名lzw

在线演示地址如下：

/js//js-f-windows-style-tab-demo/

具体代码如下：

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;}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=""+page_name+"

"; 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"; } }}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+="

---------------这是第"+number+"页---------------"; } return content_str; }(i+1); }