<!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. git cherry-pick

    在不同的分支上merge是有点很危险的事情,尤其当两个分支内容差异较大的时候,而恰好,你想合并的就是几次commit而已,那么用cherry-pick吧. 将B分支的提交合并到A分支: git che ...

  2. php curl

    这几天在帮一些同学处理问题的时候,突然发现这些同学是使用file_get_contents()函数来采集页面内容的,貌似都没有curl的概念亦或是对这种工具特别不敏感, 本文我来给大家详细介绍下cUR ...

  3. Swiper 中文API手册（share）

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  4. 网页引用google字体速度慢：fonts.googleapis.com

    由于众所周知的原因,国内使用google font库有很大的问题. 使用国内镜像如360网站卫士常用前端公共库CDN服务 http://libs.useso.com/ 优点:使用方便 缺点:目标用户包 ...

  5. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  6. JavaScript面向对象,及面向对象的特点,和如何构造函数

    1.面向对象和面向过程的区别 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了: 面向对象是把构成问题事务分解成各个对象,建立对象的目的不是 ...

  7. PHP mysql_fetch_array() 函数

    PHP mysql_fetch_array() 函数 从结果集中取得一行作为关联数组,或数字数组,或二者兼有.返回根据结果集取得的行生成的数组,如果没有更多行则返回false. 提示:有很重要的一点必 ...

  8. UVa 10410树重建

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. 【Linux命令】之fc，手动安装字体

    在linux,把字体文件拷贝到字体目录后,执行fc-cache命令,fc-cache扫描字体目录并生成字体信息的缓存,然后应用程序就可以立即使用这些新安装的字体. 1.把windows OS下的字体C ...

  10. Makefile经典教程(掌握这些足够)

    makefile很重要 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的程序员 ...