CSS实现Tab布局的方法-创新互联
小编给大家分享一下CSS实现Tab布局的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在舟曲等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都网站设计、网站制作 网站设计制作定制网站设计,公司网站建设,企业网站建设,品牌网站设计,成都全网营销推广,成都外贸网站建设,舟曲网站建设费用合理。一、布局方式
1、内容与tab分离
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按钮加上切换样式。
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)针对布局二:
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
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
2
3
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布局的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
分享标题:CSS实现Tab布局的方法-创新互联
浏览路径:http://scjbc.cn/article/dphhpg.html