比较实用的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 >

 

 

你可能感兴趣的:(tab)