<!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. PARSEC-3.0编译错误

    OS: Ubuntu 14.04 LTS (x86_64) ***error 1 OpenSSL 1.0.1e 与 perl5.18 不兼容 POD document had syntax error ...

  2. Notes of 大数据智能

    资料 刘知远 等. 大数据智能:互联网时代的机器学习和自然语言处理技术. 北京:电子工业出版社. 2016. 1 深度学习--机器大脑的结构 深度学习(Deep Learning)的两个方面: 神经网 ...

  3. svm损失函数

    作者:杜客链接:https://zhuanlan.zhihu.com/p/20945670来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. SVM的损失函数定义如下: 举 ...

  4. iOS的主要框架介绍

    框架是一个目录,这个目录包含了共享库,访问共享库里代码的头文件,和其它的图片和声音的资源文件.一个共享库定义的方法或函数可以被应用程序调用. IOS提供了很多你可以在应用程序里调用的框架.要使用一个框 ...

  5. Nutch插件原理

    本文目的:讲解Nutch的插件运行时加载原理

  6. 匈牙利算法 DFS模板（了解度+1）

    //算法核心是求最大匹配数 #include<bits/stdc++.h> #include<iostream> #include<cstdio> #include ...

  7. 初学Laravel

    之前一直用开tp和ot,本来觉得学会一个tp便可走遍天下,tp的确强大.但后来听到很多同行的同学说他们的公司都开始转型往lv走了,我的同学没有学过lv,然而公司给足时间去让他们去学.当然,缺人可能是占 ...

  8. java如何在eclipse编译时自动生成代码

    用eclipse写java代码,自动编译时,如何能够触发一个动作,这个动作是生成本项目的代码,并且编译完成后,自动生成的代码也编译好了, java编辑器中就可以做到对新生成的代码的自动提示? 不生成代 ...

  9. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  10. c# equals与==

    对于值类型,如果对象的值相等,则相等运算符 (==) 返回 true,否则返回 false.对于string 以外的引用类型,如果两个对象引用同一个对象,则 == 返回 true.对于 string ...