如何制作类似Windows系统中的选项卡的效果

如何制作类似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 源顺序排列。