CSS实现Tab布局实例展示

下面小编就为大家带来一篇css实现tab布局的简单实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、布局方式

1、内容与tab分离

立即学习“前端免费学习笔记（深入）”；

   
     
内容1
     
内容2
     
内容3
     
内容4
      
     

登录后复制登录后复制        内容1        内容2        内容3        内容4        

立即学习“前端免费学习笔记（深入）”；

ul,li{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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;}.tab-content .item:target{  background:yellow;}

登录后复制

2、内容与tab一体 

立即学习“前端免费学习笔记（深入）”；

登录后复制登录后复制登录后复制登录后复制            

1

1

2

2

3

3

4

4

立即学习“前端免费学习笔记（深入）”；

ul,li,p{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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;}

登录后复制登录后复制

利用负margin，将内容区对齐，然后内容去添加背景色，避免不同tab对应的区域透视重叠。

二、CSS实现交互

1、锚点实现（target）

(1)针对布局一：item从上往下排列，父元素tab-content加上overflow:hidden。利用锚点，点击不同a标签的时候，具有对应ID的item会切换到tab-content的视图中，然后利用hover给tab按钮加上切换样式。

立即学习“前端免费学习笔记（深入）”；

   
     
内容1
     
内容2
     
内容3
     
内容4
      
     

登录后复制登录后复制        内容1        内容2        内容3        内容4        

立即学习“前端免费学习笔记（深入）”；

ul,li{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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;}

登录后复制

上述方法只是利用了锚点切换，没有使用：target。修改CSS

立即学习“前端免费学习笔记（深入）”；

ul,li{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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;}

登录后复制

item使用绝对定位，然后使用:target修改元素z-index达到切换效果（其实也可以通过控制元素的display来达到切换效果）

（2）针对布局二：

立即学习“前端免费学习笔记（深入）”；

登录后复制登录后复制登录后复制登录后复制            

1

1

2

2

3

3

4

4

立即学习“前端免费学习笔记（深入）”；

ul,li,p {  margin: 0;  padding: 0;  list-style: none;}.container {  width: 400px;  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 a {  display:inline-block;  width:100%;  height:100%;  text-decoration: none;}.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:target {  position: relative;  z-index: 1}.container .item:target .title {  border-bottom: none;  background-color: yellow;}

登录后复制

立即学习“前端免费学习笔记（深入）”；

2、hover实现

（1）针对布局一：

无法简单的通过CSS实现

（2）针对布局二：

立即学习“前端免费学习笔记（深入）”；

登录后复制登录后复制登录后复制登录后复制            

1

1

2

2

3

3

4

4

立即学习“前端免费学习笔记（深入）”；

ul,li,p{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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;}

登录后复制登录后复制

3、label与:checked实现

（1）针对布局一：

立即学习“前端免费学习笔记（深入）”；

  
        
内容1
        
内容2
        
内容3
        
内容4
    
    

登录后复制      内容1      内容2      内容3      内容4      

立即学习“前端免费学习笔记（深入）”；

ul,li {  margin: 0;  padding: 0;  list-style: none;}.container {  width: 400px;  height: 300px;  background-color: silver;}.tab-content {  position: relative;  width: 100%;  height: 80%;  overflow: hidden;}input {  margin: 0;  width: 0;}.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;}.tab-control li:hover {  background-color: #7b7474}.tab-control label {  display: inline-block;  width: 100%;  height: 100%;  line-height: 100%;  text-align: center;  text-decoration: none;  cursor: pointer;}.tab-control label::after {  content: "";  display: inline-block;  height: 100%;  vertical-align: middle;}.tab-content .radio-item{  display:none;}.tab-content .radio-item:checked+.item {  z-index: 1;  background-color: yellow;}

登录后复制

利用css :checked与+（选择紧接在另一个元素后的元素，而且二者有相同的父元素）选择符。

（2）针对布局二：

立即学习“前端免费学习笔记（深入）”；

登录后复制登录后复制登录后复制登录后复制                   1       

1

                        2       

2

                        3       

3

                        4       

4

立即学习“前端免费学习笔记（深入）”；

ul,li,p{  margin:0;  padding:0;  list-style:none;}.container{  width:400px;  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{  display:inline-block;  width:100%;  line-height:40px;  border:1px solid silver;  box-sizing:border-box;  text-align:center;  cursor:pointer;}.container .item .content{  position:relative;  width:400%;  height:100%;  background-color:yellow;}.ml1{  margin-left:-100%;}.ml2{  margin-left:-200%;}.ml3{  margin-left:-300%;}.radio-item{  display:none;}.radio-item:checked~.title{  background-color:yellow;  border-bottom:none;}.radio-item:checked~.content{  background-color:yellow;  z-index:1;}

登录后复制

以上就是CSS实现Tab布局实例展示的详细内容，更多请关注【创想鸟】其它相关文章！