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


Posted in Javascript onOctober 20, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
js中top的作用深入剖析
Mar 04 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
JavaScript 实现页面滚动动画
Apr 24 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 #Javascript
require.js的用法详解
Oct 20 #Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 #Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 #Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 #Javascript
js验证身份证号有效性并提示对应信息
Oct 19 #Javascript
详解JavaScript数组的操作大全
Oct 19 #Javascript
You might like
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php调用c接口无错版介绍
2014/03/11 PHP
Symfony控制层深入详解
2016/03/17 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
js切换div css注意的细节
2012/12/10 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
详谈javascript异步编程
2016/02/21 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python计算信息熵实例
2020/06/18 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
教师开学感言
2014/02/14 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
企业员工薪酬方案
2014/06/04 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers