JS实现仿Windows经典风格的选项卡Tab切换代码
作者:企鹅 发布时间:2023-08-25 05:33:54
标签:JS,选项卡,Tab
本文实例讲述了JS实现仿Windows经典风格的选项卡Tab切换代码。分享给大家供大家参考,具体如下:
这款仿Windows风格的选项卡,带有灰色的立体感,示例内容是用JS控制输出,只是为了演示功能,你在用的时候完全可以去掉的。
运行效果截图如下:
具体代码如下:
<!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程序设计有所帮助。
0
投稿
猜你喜欢
- 之前我们在写js代码的时候都知道可以用var定义全局变量和局部变量,也可以省略var,而且在非严格模式下不会报错,但是并不知道两
- 功能描述:1、右击节点可进行增删改2、可对节点数据进行模糊查询3、右击第一级节点可以进行同级节点增加4、双击节点或点击修改节点 都可以对节点
- 如何正确显示数据库里同时存在的GB码和BIG5码? Public Function CheckBIG(strS
- vue3 表单验证前言表单验证可以有效的过滤不合格的数据,减少服务器的开销,并提升用户的使用体验。今天我们使用 vue3 来做一个表单验证的
- 前言之前写过一个关于微信授权登陆的文章传送门最近在做小程序的项目,依旧是商城,又开始研究微信的登陆授权坑,第一次接触小程序,授权登陆也是一塌
- 前言众所周知,Dataset和Dataloder是pytorch中进行数据载入的部件。必须将数据载入后,再进行深度学习模型的训练。在pyto
- 引言Golang的并发编程令人着迷,使用轻量的协程、基于CSP的channel、简单的go func()就可以开始并发编程,在并发编程中,往
- 一、问题描述在用python开发时经常用到logging这个包,根据官方示例,如果要指定日志级别可以写成如下的方式。import loggi
- 描述replace() 方法把字符串中的 old(旧字符串) 替换成 new(新字符串),如果指定第三个参数max,则替换不超过 max 次
- function ReportFileStatus(filespec) { var fso, s = filespec; fso = new
- 在简略的说之前,首先要对RW锁的结构有一个大致的了解type RWMutex struct { w
- 实例如下:#coding=utf-8import subprocessfrom time import *import win32apiim
- 第一种:.py文件直接封装成exe1.cmd进入py文件所在的目录备注:在py文件所在的目录下,按住shift+鼠标右击,然后找到&
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 有时在浏览网页时,常常因为网页中的图片文件过大而使下载时间较长,这样还没有下载完,就会有许多浏览者不耐烦地拂袖而去,从而损失了客户流。但要使
- 本文介绍基于Python语言,针对一个文件夹下大量的Excel表格文件,基于其中每一个文件,随机从其中选取一部分数据,并将全部文件中随机获取
- xml(可扩展标记语言)看起来可能像某种w3c标准——现在没有什么实际影响,即使以后能派上用场,也是很久以后的事。但实际上,它现在已经得到了
- 1.main.js文件中添加已下代码Vue.directive('drag', { //1.指令绑定到元素上回立
- 手痒痒系列之简单的放大镜写了个放大镜功能,可以设置显示的宽高width,height显示的位置,float ‘left’ 'righ
- 网上考试设计思路是怎样的?为了运行这个应用程序,我们需要在global.asa文件里进行设置数据库的连接。global.asa <&n