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

luckfly

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

解决思路：
选项卡的特点是在单击标签时自动切换显示相应的选项卡，这里就要用到显示与隐藏的动作，而且单击的标签和显示的选项卡还有对应的关系，这种对应关系通过 cells和tBodies两个集合的关联来实现。

具体步骤：
1.插入表格宽为340像素的2行1列表格，作为外框。

   
  
  
2.在第一行的单元格中插入一个1行7列的表格，并写上标签名。(第一行的七个单元格作为标签，其余七行分别对应着单击标签切换到的七个选项卡)

  
   
     常规
     安全
     隐私
     内容
     连接
     程序
     高级
   
   
   
  
3.在第二行的单元格中插入一个7行1列的表格，并按行用 TBODY标签将表格分为7级。每组按顺序分别对应着相应标签的选项卡。

  
   
     常规
     安全
     隐私
     内容
     连接
     程序
     高级
   
   
   
        
     
         主页
Internet临时文件
历史记录
        
     
     
        
         请为不同区域的 Web内容指定安全设置
该区域的安全级别
        
     
     
        
         设置
网站
        
     
     
        
         分级审查
证书
个人信息
        
     
     
        
         拨号和虚拟专用网络设置
局域网(LAN)设置
        
     
     
        
         Internet 程序
重置 Web 设置
检查 Internet Explorer 是否为默认的浏览器
        
     
     
        
         设置
还原为默认值
        
     

  
4.定义CSS并设置默认显示的选项卡，使效果更加逼真。

  td{font:normal 12px Tahoma}
  #content tbody{display:none}
  .item{background:url(images/item.gif) no-repeat bottom;width:51px;height:28px;text-align:center}
  .c_item{background:url(images/citem.gif) no-repeat bottom;width:56px;text-align:center;vertical-align:top;padding-top:3px}
   

  
   
   
     常规
     安全
     隐私
     内容
     连接
     程序
     高级
   
   
  
   
      
   
        
     
         主页
Internet临时文件
历史记录
        
     
     
        
         请为不同区域的 Web内容指定安全设置
该区域的安全级别
        
     
     
        
         设置
网站
        
     
     
        
         分级审查
证书
个人信息
        
     
     
        
         拨号和虚拟专用网络设置
局域网(LAN)设置
        
     
     
        
         Internet 程序
重置 Web 设置
检查 Internet Explorer 是否为默认的浏览器
        
     
     
        
         设置
还原为默认值
        
     
      
   
  
5.加入JavaScript脚本控制，完整代码如下：
   
  td{font:normal 12px Tahoma}
  #content tbody{display:none}
  .item{background:url(images/item.gif) no-repeat bottom;width:51px;height:28px;text-align:center}
  .c_item{background:url(images/citem.gif) no-repeat bottom;width:56px;text-align:center;vertical-align:top;padding-top:3px}
   
   
  function switchit(){
  begin=new Date()          //程序开始执行的时间，测试用的，可以删掉
  obj=event.srcElement
  if(obj.tagName!="TD")     //事件发生的对象不是单元格时退出
  return  
  index=obj.cellIndex    //单元格的在行中的索引值
//遍历该行所有单元格，并设置className为item
  for(var i=0;i
  
  
   
   
     常规
     安全
     隐私
     内容
     连接
     程序
     高级
   
   
  
   
      
   
        
     
         主页
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 源顺序排列。

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/15511/showart_97368.html