比较实用的Tab标签

兼容opera，chorme，ie，但是在firefox下面有些许缺憾。

见图：

 

代码如下：

 

<% @ Page Language = " C# "  AutoEventWireup = " true "   CodeFile = " Default.aspx.cs "  Inherits = " _Default "   %>

<! 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  runat ="server" >
     < title > FZPT系统的tab样式以及使用方法剖析 </ title >
     < style  type ="text/css" >
    #tab
     {
        margin-bottom : 4px ;
        font-weight :  normal ;  
        font-size :  12px ;  
        line-height :  normal ;
        font-style :  normal ;  
        font-variant :  normal ;
     }
    #tab td
     {
        white-space :  nowrap ;
        padding : 6px ;
        padding-left : 5px ;
        padding-right : 5px ;
     }

    .tabLeft,.tabFocus,.tabNormal,.tabRight
     {
        border :  1px solid #C2C2C2 ;
        text-align : center ;
     }

    .tabLeft
     {
        border-width : 0px 0px 1px 0px ;
        width : 4px ;
     }
    .tabFocus
     {
        border-width : 3px 0px 0px 1px ;
        border-top : 3px  solid #FF9C00 ;
        cursor : hand ;
        font : bold ;
        white-space :  nowrap ;
        background : #FFEA97 ;
        filter : progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#FFEA97, endcolorstr=#ffffff) ;
     }

    .tabNormal
     {
        border-width : 1px 0px 1px 1px  ;
        cursor : hand ;
        white-space :  nowrap ;
        filter : progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#EBEBDC, endcolorstr=#ffffff) ;
        color : #000000
     }
    .tabRight
     {
        border-width : 0px 0px 1px 1px  ;
     }
   


     </ style >
     < script  type ="text/javascript" >
         var  selTabId  =   null ;   // 选中的tab的id设置为空
         var  selTabParam  =   " 0 " ;
         var  tabID ;
         var  tableIDs;
        
         function  initview() {
            tabID  =   new  Array( " tabxxb " ,  " tabssb " ,  " tabcpb " ,  " tabcwb " ,  " tabfdcb " ,  " tabdcb " );
            tableIDs  =   new  Array( " xs_table " ,  " xs_table " ,  " xs_table " ,  " xs_table " ,  " xs_table " ,  " xs_table " );
        }

         function  showSelectedTab(idno) {
            selTabParam  =  idno;
            selTabId  =  tabID[idno];
             if  (document.all(tabID[idno]).className  ==   " tabNormal " ) {
                 for  ( var  i  =   0 ; i  <  tabID.length; i ++ ) {
                    document.all(tabID[i]).className  =   " tabNormal " ;
                    document.all(tableIDs[i]).style.display  =   " none " ;
                }
                document.all(tabID[idno]).className  =   " tabFocus " ;
                document.all(tableIDs[idno]).style.display  =   " block " ;
            }
        }


         function  showSelectedTabCustomer1(bj) {
             if  ( " 0 "   ==  bj) {
                document.getElementById( " iframeMain " ).scr  =   " http://www.baidu.com " ;
            }
             if  ( " 1 "   ==  bj) {
                document.getElementById( " iframeMain " ).src  =   " http://www.google.com.hk " ; ;
            }
             if  ( " 2 "   ==  bj) {
                document.getElementById( " iframeMain " ).src  =   " http://www.bing.com " ;
            }
             if  ( " 3 "   ==  bj) {
                document.getElementById( " iframeMain " ).src = " http://www.cnblogs.com " ;
            }
             if  ( " 4 "   ==  bj) {
                document.getElementById( " iframeMain " ).src = " http://www.csdn.net " ;
            }
             if  ( " 5 "   ==  bj) {
                document.getElementById( " iframeMain " ).src = " http://www.51cto.com " ;
            }
            showSelectedTab(bj);
        }
     </ script >
</ head >
< body  onload ="initview();" >
     < form  id ="form1"  runat ="server" >
    
     < br  />
     < br  />
      < table  id ="tab"  cellspacing ="0"  cellpadding ="0"  width ="100%"   align ="center"  border ="0" >
         < tr >
             < td  class ="tabLeft"  width ="21px" >
                
             </ td >
             < td  class ="tabFocus"  id ="tabxxb"  onclick ="showSelectedTabCustomer1('0'); "  width ="60px" >
                百度网站
             </ td >
             < td  class ="tabNormal"  id ="tabssb"  onclick ="showSelectedTabCustomer1('1'); "  width ="60px" >
                谷歌网站
             </ td >
             < td  class ="tabNormal"  id ="tabcpb"  onclick ="showSelectedTabCustomer1('2'); "  width ="60px" >
                微软搜索
             </ td >
             < td  class ="tabNormal"  id ="tabcwb"  onclick ="showSelectedTabCustomer1('3'); "  width ="60px" >
                博客园
             </ td >
             < td  class ="tabNormal"  id ="tabfdcb"  onclick ="showSelectedTabCustomer1('4'); "  width ="60px" >
                csdn
             </ td >
             < td  class ="tabNormal"  id ="tabdcb"  onclick ="showSelectedTabCustomer1('5')"  width ="65px" >
                51cto网站
             </ td >
             < td  class ="tabRight" >
               
             </ td >
         </ tr >
     </ table >
     < div  id ="xs_table"  style ="width: 100%;" >
         < table  border ="0"  cellspacing ="0"  cellpadding ="0"  style ="width: 100%" >
             < tr >
                 < td  align ="left"  colspan ="4"  style ="padding-left: 5px;" >
                     < iframe  id ="iframeMain"  name ="mainManger"  runat ="server"  width ="100%"  style ="height: 450px;"  src =""
                        frameborder ="0"  marginheight ="0"  marginwidth ="0"  scrolling ="auto" ></ iframe >
                 </ td >
             </ tr >
         </ table >
     </ div >
     </ form >
</ body >
</ html >