<!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. Localization要从第一天开始计划

    最近E3,微软说可以在任何region玩任何语言的游戏了.换一个语言么,听起来没有那么复杂,其实操作起来还得是从软件工程初期就好好计划. Windows在很长一段时间,你安装完了,就不能换语言了.大学 ...

  2. Ported my old SPH solver in Unity

    Here is the link to the web player version, http://www-scf.usc.edu/~taian/pages/sph/builds/12212014/ ...

  3. 将程序部署到weblogic出现乱码问题

    出现错误: 将文件部署到weblogic上,在linux环境下运行程序时出现乱码问题 原因: (1)可能是linux系统的编码问题 解决办法:登陆weblogic 输入命令: cd /etc/sysc ...

  4. 如何配置Windows 防火墙，允许SQL Server的远程连接

    一.如何找到SQL Server正在侦听的TCP端口,可以按一下步骤: 1.打开 SQL Server 配置管理器中,从开始->所有程序-> Microsoft SQL Server 20 ...

  5. sql中对于case when...then...else...end的写法和理解

    查询配件主数据表(tbl_part_base_info)的所有数据和配件是否有物料(物料表(tbl_material)中有配件主数据表的part_no,就表示有物料,反之,则表示没有物料),用sql中 ...

  6. ActiveMQ的初夜

    Producer Flow Control mq自己实现了Flow Control(流量控制,默认开启),在mq的版本中,4.x和5.x流量控制实现原理并不相同,前者通过 TCP Flow Contr ...

  7. rigidbody2D.velocity 提示缺少using？用的unity5？

    请用 GetComponent<Rigidbody2D>().velocity

  8. LEETCODE —— Surrounded Regions

    Total Accepted: 43584 Total Submissions: 284350 Difficulty: Medium Given a 2D board containing 'X' a ...

  9. Struts2 之 对xwork的理解

    对象的生命周期的管理是面向对象编程亘古不变的话题,从syntax的角度,面向对象的高级编程语言都是以“对象”为核心,而对象之间的继承关系.嵌套引用关系构成的对象树结构为我们进行对象级别的逻辑操作提供了 ...

  10. OpenGL变换

    概述 OpenGL变换矩阵 实例:GL_MODELVIEW矩阵 实例:GL_PROJECTION矩阵 概述 OpenGL管线中,在光栅化操作之前,包括顶点位置与法线向量的几何数据经顶点操作与图元装配操 ...