如何制作类似Windows系统中的选项卡的效果
![]()
解决思路：
选项卡的特点是在单击标签时自动切换显示相应的选项卡，这里就要用到显示与隐藏的动作，而且单击的标签和显示的选项卡还有对应的关系，这种对应关系通过 cells和tBodies两个集合的关联来实现。
![]()
具体步骤：
1.插入表格宽为340像素的2行1列表格，作为外框。
| |
| |
2.在第一行的单元格中插入一个1行7列的表格，并写上标签名。(第一行的七个单元格作为标签，其余七行分别对应着单击标签切换到的七个选项卡)
常规 |
安全 |
隐私 |
内容 |
连接 |
程序 |
高级 |
|
| |
3.在第二行的单元格中插入一个7行1列的表格，并按行用 TBODY标签将表格分为7级。每组按顺序分别对应着相应标签的选项卡。
常规 |
安全 |
隐私 |
内容 |
连接 |
程序 |
高级 |
|
主页
Internet临时文件
历史记录
请为不同区域的 Web内容指定安全设置
该区域的安全级别
设置
网站
分级审查
证书
个人信息
拨号和虚拟专用网络设置
局域网(LAN)设置
Internet 程序
重置 Web 设置
检查 Internet Explorer 是否为默认的浏览器
设置
还原为默认值
|
4.定义CSS并设置默认显示的选项卡，使效果更加逼真。
常规 |
安全
隐私
内容
连接
程序
高级
主页
Internet临时文件
历史记录
请为不同区域的 Web内容指定安全设置
该区域的安全级别
设置
网站
分级审查
证书
个人信息
拨号和虚拟专用网络设置
局域网(LAN)设置
Internet 程序
重置 Web 设置
检查 Internet Explorer 是否为默认的浏览器
设置
还原为默认值
|
5.加入JavaScript脚本控制，完整代码如下：
常规 |
安全
隐私
内容
连接
程序
高级
主页
Internet临时文件
历史记录
请为不同区域的 Web内容指定安全设置
该区域的安全级别
设置
网站
分级审查
证书
个人信息
拨号和虚拟专用网络设置
局域网(LAN)设置
Internet 程序
重置 Web 设置
检查 Internet Explorer 是否为默认的浏览器
设置
还原为默认值
|
注意：先准备好三个图片作背景用，如图1.2.39所示。
![]()
图1.2.39 本例所用到的三个背景图片
特别提示
为了接近系统中的选项卡(图 1.2.40)，用了三个图片作为背景(图 1.2.39)，所以在单击标签时的切换比较慢，具体消耗时间可以看代码运行时的状态栏提示。代码运行效果如图 1.2.41、图1.2.42所示。
![]()
图 1.2.41 Windows系统中的选项卡
![]()
图1.2.42 模拟的 Windows 系统选项卡效果
特别说明
本例主要是通过所单击标签(单元格)的cellIndex属性值，来设置表格的tBodies集合中相应项的显示与隐藏。
tBodies 获取表格中所有 tBody 对象的集合。此集合中的对象以 HTML 源顺序排列。
阅读(667) | 评论(0) | 转发(0) |
