<!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. 用 pytube 爬取 youtube 视频

    这个方法比直接用浏览器插件逼格高点 1. 简介 需要用到 pytube 这个第三方库:https://github.com/nficano/pytube 这里只是把这个页面捡重要部分翻译了一下. py ...

  2. Sep19_html/css_imooc学习笔记_1

    1. <h1></h1>标题,h1-h6从大到小 2. <p></p> 段落 3. <img src=“1.jpg”> 加入图片 4.基本结 ...

  3. iOS里防止按钮被多次点击的办法

    原理:利用局部变量生存期局限在当前函数或者当前代码块的原理,实现C++里AutoLock的概念,其实也就是智能指针的概念. 利用局部变量在创建时执行按钮的setEnable为NO,在函数结束,且无bl ...

  4. 在AndroidStudio不能找到so文件问题：couldn't find libweibosdkcore.so

    解决步骤已经写到我的公众号,二维码在下面. 欢迎观看我的CSDN学院课程,地址:http://edu.csdn.net/course/detail/2877 本人联系方式: 更多精彩分享,可关注我的微 ...

  5. redis入门笔记(1)

    redis入门笔记(1) 1. Redis 简介 •Redis是一款开源的.高性能的键-值存储(key-value store).它常被称作是一款数据结构服务器(data structure serv ...

  6. 【引】objective-c，6：Autorelease Pool

    参考博客: http://blog.leichunfeng.com/blog/2015/05/31/objective-c-autorelease-pool-implementation-princi ...

  7. {part2}DFN+LOW（tarjan）割边

    首先非树边肯定不是割边,因为去掉它DFS树不受影响,只要还能生成一棵DFS树那么图就是连通的. 然后割掉一条树边只可能造成一个点与它的父亲不连通. 那好办,也就是说这个以这个点为根的子树就是上面所说的 ...

  8. SQL语句小总结

    无论是面试过程中,还是未来工作中,SQL都是一定会考到和用到的.所以,在此对之前看过的一些SQL知识点进行一下总结和记录,算是起到一个笔记本的作用.没有深入学习过SQL的和对SQL印象不太深的朋友可以 ...

  9. USACO 2015 December Contest, Gold Problem 2. Fruit Feast

    Problem 2. Fruit Feast 很简单的智商题(因为碰巧脑出来了所以简单一,一 原题: Bessie has broken into Farmer John's house again! ...

  10. Linux软raid创建

    RAID: HBA:基于主机的适配器 RAID:Redundent Array of Inexpensive Disks 廉价磁盘阵列 Independent       独立磁盘阵列 Level:仅 ...