在HTML页面中实现一个简单的Tab

为了充分利用有限的HTML页面空间，经常会采用类似与TabControl的效果通过切换来显示更多的内容。本文将采用一种最为简单的方法来实现类似如Tab页切换的效果。

Tab特点

  1. 每个页签由标题区和内容区组成
  2. 内容区和标题一一对应
  3. 至少有两组页签以便可以切换
  4. 所有页签只有两种状态：选中和未选中，页面载入后默认显示第一个
  5. 选中页签(当前页签)只有一个并突出高亮显示
  6. 鼠标点击或移上时切换

HTML页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Tab页切换</title>

<script src="javascript/JScript.js" type="text/javascript"></script>

<link href="css/css.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table class="tabTitlesContainer">

<tr id="tabTitles">

<td class="tabTitleSelected" onclick="tabPageControl(0)">DIV</td>

<td class="tabTitleUnSelected" onclick="tabPageControl(1)">CSS</td>

<td class="tabTitleUnSelected" onclick="tabPageControl(2)">JavaScript</td>

</tr>

</table>

<table id="tabPagesContainer">

<tbody class="tabPageSelected">

<tr class="tabPage">

<td>HTML的DIV控件是其他控件的容器。当要以编程方式生成控件、隐藏/显示一组控件或本地化一组控件时，该控件尤其有用。</td>

</tr>

</tbody>

<tbody class="tabPageUnSelected">

<tr class="tabPage">

<td>级联样式表 (CSS) 包含应用于网页中的元素的样式规则。这些样式定义元素的显示方式以及元素在页面中的放置位置</a></td>

</tr>

</tbody>

<tbody class="tabPageUnSelected">

<tr class="tabPage">

<td>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。</td>

</tr>

</tbody>

</table>

</body>

</html>
     简单的JavaScript代码如下：
function tabPageControl(n)

{

for (var i = 0; i < tabTitles.cells.length; i++)

{

tabTitles.cells[i].className = "tabTitleUnSelected";

}

tabTitles.cells[n].className = "tabTitleSelected";

for (var i = 0; i < tabPagesContainer.tBodies.length; i++)

{

tabPagesContainer.tBodies[i].className = "tabPageUnSelected";

}

tabPagesContainer.tBodies[n].className = "tabPageSelected";

}

简单的CSS代码如下：

body{text-align:center;}

.tabTitlesContainer{text-align:center;font-size:small;cursor:hand;width:300px;border-width:thin;}

.tabTitleUnSelected{width:100px;}

.tabTitleUnSelected:hover{background-color:Orange;}

.tabTitleSelected{background-color:Gray;width:100px;}

#tabPagesContainer{text-align:left;font-size:small;font-size:small;width:300px;}

.tabPageUnSelected{background-color:Orange;display: none;}

.tabPageSelected{background-color: Orange;display:block;}

.tabPage{height:80px;}

大家可以照着上述的代码，做出最终的运行效果。

(一)在HTML页面中实现一个简单的Tab的更多相关文章

  1. 在HTML页面中实现一个简单的Tab

    参考:http://blog.sina.com.cn/s/blog_6cccb1630100m23i.html HTML页面代码如下: <!DOCTYPE html PUBLIC "- ...

  2. 分别应用include指令和include动作标识在一个jsp页面中包含一个文件。

    分别应用include指令和include动作标识在一个jsp页面中包含一个文件. hello.jsp <%@ page language="java" import=&qu ...

  3. ××校招：前端线上笔试题--页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

    题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动:   原理: 1.页面上画一个圆,画一个圆心.在这个圆的圆周上面画一个点,我们就让这个点绕着圆周跑: 2.怎 ...

  4. 获取页面中任意一个元素距离body的偏移量

    //offSet:等同于jQuery中的offSet方法,获取页面中任意一个元素距离body的偏移量function offSet(curEle) { var totalLeft = null; va ...

  5. 在某网站的登录页面登录时如果选择“记住用户名”,登录成功后会跳转到一个中间层（页面代码将登录的用户名和密码存在cookie）,中间页面中存在一个超链接，单击超链接可以链接到第三个页面查看信息。若选择“

    Response实现登录并记录用户名和密码信息 在某网站的登录页面登录时如果选择"记住用户名",登录成功后会跳转到一个中间层(页面代码将登录的用户名和密码存在cookie),中间页 ...

  6. 在iOS中实现一个简单的画板App

    在这个随笔中,我们要为iPhone实现一个简单的画板App. 首先需要指出的是,这个demo中使用QuarzCore进行绘画,而不是OpenGL.这两个都可以实现类似的功能,区别是OpenGL更快,但 ...

  7. 在eclipse中配置一个简单的spring入门项目

    spring是一个很优秀的基于Java的轻量级开源框架,为了解决企业级应用的复杂性而创建的,spring不仅可用于服务器端开发,从简单性.可测试性和松耦合性的角度,任何java应用程序都可以利用这个思 ...

  8. 如何在Liferay 7中创建一个简单的JSF Portlet

    这个将在Liferay IDE 3.1 M3的发布版中提供创建的选项,但是你也可以通过命令行来创建. 1.这是Liferay JSF团队的官网:http://liferayfaces.org/ 你能在 ...

  9. 如何在在页面中清除一个已知的cookie？

    前些天在写一个项目的时候,使用cookie来存储一些用户数据,在用户登出时需要清理以往的数据,对于一个初学者来说,我需要学习如何清除一个已知的cookie. 首先,引入两个js文件: 1.jquery ...

随机推荐

  1. datasnap 上传/下载大文件(本Demo以图传片文件为例)

    好久没写技术文了 datasnap传大流. 完整代码,同时感谢叶兄传流的指点,(只公开十天) 附:下面代码,转载请注明出处 ::code 服务端: function TServerMethods1.D ...

  2. find 使用指南

    find 使用方法整理 -name  按照文件名查找文件. -perm  按照文件权限来查找文件. -user  按照文件属主来查找文件. -group  按照文件所属的组来查找文件. - n表示文件 ...

  3. java代码对按钮进行监听---------------打印出每次点击按钮的次数

    其实,我真不会写嗯? package com.a.b; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

  4. docker 及 linux 初接触

    3天来净折腾这俩东西了,总结一下(很多都是同事给出的解释,先不保证正确性): 1.docker 里的images 和 container images 类似系统盘,container类似用系统盘装起来 ...

  5. ATM：模拟实现一个ATM + 购物商城程序

    额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 提供还款接口 ATM记录操作日志 提供管理接 ...

  6. Oracle里的执行计划

    1 执行计划的查看 1 explan plan 2 dbms_xplan包 3 sqlplus中 set autot 4 10046 5 awr报告 6一些现成的脚本 7 10053 常见的就前4种 ...

  7. C#简单操作app.config文件

    即将操作的app.config文件内容如下 <?xml version="1.0" encoding="utf-8"?> <configura ...

  8. Linux学习笔记 -- 目录与文件的管理

    目录结构 Linux的目录结构为树状结构,最顶级的目录为根目录 “/”. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 在开始本教程前我们需要先知道什么是. 绝对路径与相对路径 绝 ...

  9. [置顶] STM32 输入捕获的脉冲宽度及频率计算

    输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32 的定时器,除了 TIM6 和 TIM7,其他定时器都有输入捕获功能.以下是对脉冲宽度及频率的计算. 1.脉冲宽度 如下图所示,采集该高电平脉冲 ...

  10. ZedGraph 总论

       ZedGraph 总论            ZedGraph 是一个开源的.NET图表类库, 并且全部代码都是用C#开发的.它可以利用任意的数据集合创建2D的线性和柱形图表.          ...