(一)在HTML页面中实现一个简单的Tab
2015-04-23 14:53
543 查看
在HTML页面中实现一个简单的Tab
为了充分利用有限的HTML页面空间,经常会采用类似与TabControl的效果通过切换来显示更多的内容。本文将采用一种最为简单的方法来实现类似如Tab页切换的效果。Tab特点
每个页签由标题区和内容区组成内容区和标题一一对应
至少有两组页签以便可以切换
所有页签只有两种状态:选中和未选中,页面载入后默认显示第一个
选中页签(当前页签)只有一个并突出高亮显示
鼠标点击或移上时切换
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 .className = "tabTitleSelected"; for (var i = 0; i < tabPagesContainer.tBodies.length; i++) { tabPagesContainer.tBodies[i].className = "tabPageUnSelected"; } tabPagesContainer.tBodies .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
- 一个小型的网站,比如个人网站,可以使用最简单的html静态页面就实现了,配合一些图片达到美化效果,所有的页面均存放在一个目录下,这样的网站对系统架构、性能的要求都很简单,随着互联网业务的不断丰富,网站
- 一个简单的Css实现的Tab页面
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- 关于贴友的一个书本页面简单布局(html+css)的实现
- 简单的HTML中TAB分页实现,js控制页面tr行新增、删除、修改
- PHP实现一个简单的计算器(在html页面和php文件之间传值)
- 使用JavaScript设计一个简单的HTML倒计时页面
- 三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面
- Android 中最简单的实现 HTML(H5)调用native原生页面的方法
- 一个简单的注册登录页面(包括阿里大于的手机验证)html+JS+AJAX+PHP
- 【ife】任务九:使用HTML/CSS实现一个复杂页面
- 一个简单HTML实现一个选项卡
- 用CSS实现一个简单的幻灯片效果页面
- 实现一个简单的 页面划入效果
- bootStrap可以简单方便的实现tab页面的切换
- Android用MVP实现一个简单的类淘宝订单页面
- 一个简单的底部Tab切换实现
- 利用线性布局和相对布局实现一个简单的页面并且使应用支持国际化语言
- 利用线性布局和相对布局实现一个简单的页面