<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title>New Web Project</title>   <style type="text/css">    #content {     width: 800px;     height: 600px;    }        #tab_bar {     width: 800px;     height: 20px;     float: left;    }    #tab_bar ul {     padding: 0px;     margin: 0px;     height: 20px;     text-align: center;    }        #tab_bar li {     list-style-type: none;     float: left;     width: 200px;     height: 20px;     background-color: gray;    }        .tab_css {     width: 800px;     height: 600px;     background-color: gray;     display: none;     float: left;    }       </style>   <script type="text/javascript">    var myclick = function(v) {     var llis = document.getElementsByTagName("li");     for(var i = 0; i < llis.length; i++) {      var lli = llis[i];      if(lli == document.getElementById("tab" + v)) {       lli.style.backgroundColor = "blue";      } else {       lli.style.backgroundColor = "gray";      }     }

var divs = document.getElementsByClassName("tab_css");     for(var i = 0; i < divs.length; i++) {

var divv = divs[i];

if(divv == document.getElementById("tab" + v + "_content")) {       divv.style.display = "block";      } else {       divv.style.display = "none";      }     }

}   </script>  </head>  <body>   <div id="content">    <div id="tab_bar">     <ul>      <li id="tab1" onclick="myclick(1)" style="       tab1      </li>      <li id="tab2" onclick="myclick(2)">       tab2      </li>      <li id="tab3" onclick="myclick(3)">       tab3      </li>      <li id="tab4" onclick="myclick(4)">       tab4      </li>          </ul>    </div>    <div class="tab_css" id="tab1_content" style="display: block">     <div>Tab1 Content!</div>    </div>    <div class="tab_css" id="tab2_content">     <div>Tab2 Content!</div>    </div>    <div class="tab_css" id="tab3_content">     <div>Tab3 Content!</div>    </div>    <div class="tab_css" id="tab4_content">     <div>Tab4 Content!</div>    </div>      </div>  </body> </html>

html-tab page的更多相关文章

  1. OAF 开发TAB页

    TAB页 2013年1月17日 21:31 当查询结果列数比较多的时候,往往一页显示不下,在FORM的情况下,我们往往会用Tab页的方法解决.那么在OAF如何制作TAB页呢?下面的教程将介绍如何制作一 ...

  2. 教你如何修改FireFox打开新标签页(NewTab Page)的行列数

    FireFox的打开新建标签页(即NewTab Page)默认只能显示3x3个网站缩略图,这9个自定义的网站,非常方便快捷,什么hao123的弱爆了,本人从未用过此类导航网站,曾经用过的也只是abou ...

  3. Tab选项卡界面（1）

    Tab用一个简单的应用程序接口的标签是集中的界面布局文件的同一页上的接口组件不同的标签.并计划将在主类集中的代码文件.这种方法的优点是,文件在项目数不会被添加,但是,假设Tab接口组件更个性化的标签. ...

  4. DevExpress的分页Tab控件XtraTabControl控件的使用

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  5. 通过编写串口助手工具学习MFC过程——（七）添加Tab Control控件

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  6. vim-1-window,buffer and tab

    Summary:A buffer is the in-memory text of a file. A window is a viewport on a buffer. A tab page is ...

  7. 第54课 Qt 中的多页面切换组件

    1. 多页面切换组件(QTabWidget) (1)能够在同一个窗口中自由切换不同页面的内容 (2)是一个容器类型的组件,同时提供友好的页面切换方式 2. QTabWidget的使用方式 (1)在应用 ...

  8. vim for windows 简介

    普通人的编辑利器--VIM (for windows) 本文转载自 FROM Vincent_czz2005年5月,我开始用VIM.此后渐入佳境,原来因版权自律而放弃盗版UltraEdit的遗憾一扫而 ...

  9. Magic xpa 2.5发布 Magic xpa 2.5 Release Notes

    Magic xpa 2.5發佈 Magic xpa 2.5 Release Notes Magic xpa 2.5 Release NotesNew Features, Feature Enhance ...

  10. DataGridView in TabControl and CellValidating lead to problems

    I created a little form with a TabControl on it and a combobox. On the  first page i added a DataGri ...

随机推荐

  1. robotframework接口测试初探3

    接口自动化环境搭建好了 requests接口测试模块也会用了 那么怎样整合到RF的框架呢? 写一个小例子

  2. OpenGL阴影，Shadow Mapping（附源程序）

    实验平台:Win7,VS2010 先上结果截图(文章最后下载程序,解压后直接运行BIN文件夹下的EXE程序): 本文描述图形学的两个最常用的阴影技术之一,Shadow Mapping方法(另一种是Sh ...

  3. 登录phpmyadmin提示: #1045 无法登录 MySQL 服务器

    打开phpmyadmin,进行登录,出现以下问题,提示:#1045 无法登录 MySQL 服务器 或许出现以下错误情况:phpmyadmin:#1045 无法登录 MySQL 服务器.Access d ...

  4. Dedecms自定义表单后台列表展现方式更改

    Dedecms有自定义表单功能,方便我们收集用户信息.个人通常喜欢拿这个功能做问卷调查,在线留言等功能.但是如果使用过这个功能的朋友就会知道,Dedecms自定义表单后台列表展现方式并不好看. 上面就 ...

  5. python向数据库插入数据时出现乱码解决方案

    中文字符串前面加u 如: title =u"你好" contents = "m" ids="13" cur.execute("IN ...

  6. 理解闭包 js回收机制

    为什么要有回收机制?why? 打个比方,我有一个内存卡,这个内存是8G的,我把文件,视频,音乐,都保存到了这个内存卡,随着我的储存的内容越来越多,这个内存卡已经保存不了了,如果我还想再把其他的文件保存 ...

  7. poj2368 Buttons Nim取石子游戏

    链接:http://poj.org/problem?id=2368 和前面差距还是很大啊囧 代码: k,a;main(i){,i=;i<=k/&&k%i;++i);k%i||(a ...

  8. linux用户和用户组的基本操作

    1.用户组操作 -创建用户组 # groupadd 组名 说明:新创建的组id默认从500开始,也可以通过[-g]选项指定组id,指定组id后新创建的组id会从指定的id后依次创建. -删除用户组 # ...

  9. strlen(); strcpy(); strcat(); strcmp() ---笔记

    指针小知识点: int a =10; int *p=&a; int *q=p;        //p中保存的是a的地址 int *q=p;       //将p的值赋给q 作用是让q也指向a ...

  10. CSS布局奇技淫巧：各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...