web开发之Tab页的常见实现方法

tab和内容分离

• 布局:

  用一个大的container div容器包裹住tab-control和tab-content两个div块

  1. 给每一个tab-control的项(a标签的href属性)设置锚点
  2. 给每一个tab-content的项,设置id属性 id属性名需与上述锚点一一对应

    
 
        
 
            
 
                
天猫超市
 
                
天猫生鲜
 
                
天猫电器
 
                
天猫家具
 
            
 
        
        
 
            
天猫超市内容
 
            
天猫生鲜内容
 
            
天猫电器内容
 
            
天猫家具内容
 
        
 
    

• 样式：

锚点实现：

ul,li{ margin:0; padding:0; list-style:none;}
        .container{ width:100%; height:300px; background-color:silver;}
        .tab-content{ width:100%; height:80%; overflow:hidden;}
        .tab-content .item{ width:100%; height:100%;}
        .tab-control{ width:100%; height:20%;}
        .tab-control ul{ height:100%;}
        .tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer;}
        .tab-control li:hover{ background-color:#7b7474}
        .tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none;}
        .tab-control a::after{ content:""; display:inline-block; height:100%; vertical-align:middle;}

:tagert实现
ul,li{ margin:0; padding:0; list-style:none;}
        .container{ width:100%; height:300px; background-color:silver;}
        .tab-content{ position:relative; width:100%; height:80%; overflow:hidden;}
        .tab-content .item{ position:absolute; left:0; top:0; width:100%; height:100%;}
        .tab-control{ width:100%; height:20%;}.tab-control ul{ height:100%;}
        .tab-control li{ width:25%; height:100%; float:left; border:1px solid silver; box-sizing:border-box; background-color:white; cursor: pointer;}
        .tab-control li:hover{ background-color:#7b7474}
        .tab-control a{ display:inline-block; width:100%; height:100%; line-height:100%; text-align:center; text-decoration: none;}
        .tab-control a::after{ content:""; display:inline-block; height:100%; vertical-align:middle;}
        .tab-content .item:target{ z-index:1; background-color:yellow;}

tab和内容一体

• 布局

 
        
 
            
 
                
天猫超市
 
                
天猫超市内容
 
            
            
 
                
天猫生鲜
 
                
天猫生鲜内容
            
             
 
                
天猫电器
 
                
天猫电器内容
             
 
             
 
                
天猫家具
                
天猫家具内容
 
             
 
            
        

• 样式：

    ul,li,p{ margin:0; padding:0; list-style:none;}
    .container{ width:100%; height:300px; background-color:silver; border:1px solid silver;}
    .container ul{ width:100%; height:100%; overflow:hidden;}
    .container .item{ float:left; width:25%; height:100%; background-color:white;}
    .container .item .title{ line-height:40px; border:1px solid silver; box-sizing:border-box; text-align:center; cursor:pointer;}
    .container .item .content{ width:400%; height:100%; background-color:yellow;}
    .ml1{ margin-left:-100%;}.ml2{ margin-left:-200%;}.ml3{ margin-left:-300%;}
    .active{ position:relative; z-index:1}
    .container .item:hover{ position:relative; z-index:1}
    .container .item:hover .title{ border-bottom:none; background-color:yellow;}