CSS实现Tab布局的简单实例(必看)
发布时间：2017-04-13 10:41:58 作者：佚名 
我要评论
我要评论下面小编就为大家带来一篇CSS实现Tab布局的简单实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、布局方式
1、内容与tab分离
<div class="container">
<div class="tab-content">
<div id="item1" class="item">内容1</div>
<div id="item2" class="item">内容2</div>
<div id="item3" class="item">内容3</div>
<div id="item4" class="item">内容4</div>
</div>
<div class="tab-control">
<ul>
<li><a href="#item1">内容1</a></li>
<li><a href="#item2">内容2</a></li>
<li><a href="#item3">内容3</a></li>
<li><a href="#item4">内容4</a></li>
</ul>
</div>
</div>
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一体
<div class="container">
<ul>
<li class="item active">
<p class="title">1</p>
<p class="content">1</p>
</li>
<li class="item">
<p class="title">2</p>
<p class="content ml1">2</p>
</li>
<li class="item">
<p class="title">3</p>
<p class="content ml2">3</p>
</li>
<li class="item">
<p class="title">4</p>
<p class="content ml3">4</p>
</li>
</ul>
</div>
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按钮加上切换样式。
<div class="container">
<div class="tab-content">
<div id="item1" class="item">内容1</div>
<div id="item2" class="item">内容2</div>
<div id="item3" class="item">内容3</div>
<div id="item4" class="item">内容4</div>
</div>
<div class="tab-control">
<ul>
<li><a href="#item1">内容1</a></li>
<li><a href="#item2">内容2</a></li>
<li><a href="#item3">内容3</a></li>
<li><a href="#item4">内容4</a></li>
</ul>
</div>
</div>
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）针对布局二：
<div class="container">
<ul>
<li class="item active" id="item1">
<p class="title"><a href="#item1">1</a></p>
<p class="content">1</p>
</li>
<li class="item" id="item2">
<p class="title"><a href="#item2">2</a></p>
<p class="content ml1">2</p>
</li>
<li class="item" id="item3">
<p class="title"><a href="#item3">3</a></p>
<p class="content ml2">3</p>
</li>
<li class="item" id="item4">
<p class="title"><a href="#item4">4</a></p>
<p class="content ml3">4</p>
</li>
</ul>
</div>
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）针对布局二：
<div class="container">
<ul>
<li class="item active">
<p class="title">1</p>
<p class="content">1</p>
</li>
<li class="item">
<p class="title">2</p>
<p class="content ml1">2</p>
</li>
<li class="item">
<p class="title">3</p>
<p class="content ml2">3</p>
</li>
<li class="item">
<p class="title">4</p>
<p class="content ml3">4</p>
</li>
</ul>
</div>
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）针对布局一：
<div class="container">
<div class="tab-content">
<input type="radio" name="item" class="radio-item" id="item1" checked/>
<div class="item">内容1</div>
<input type="radio" name="item" class="radio-item" id="item2" />
<div class="item">内容2</div>
<input type="radio" name="item" class="radio-item" id="item3" />
<div class="item">内容3</div>
<input type="radio" name="item" class="radio-item" id="item4" />
<div class="item">内容4</div>
</div>
<div class="tab-control">
<ul>
<li><label for="item1">内容1</label></li>
<li><label for="item2">内容2</label></li>
<li><label for="item3">内容3</label></li>
<li><label for="item4">内容4</label></li>
</ul>
</div>
</div>
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）针对布局二：
<div class="container">
<ul>
<li class="item active">
<input type="radio" name="item" class="radio-item" id="item1" checked/>
<label class="title" for="item1">1</label>
<p class="content">1</p>
</li>
<li class="item">
<input type="radio" name="item" class="radio-item" id="item2" />
<label class="title" for="item2">2</label>
<p class="content ml1">2</p>
</li>
<li class="item">
<input type="radio" name="item" class="radio-item" id="item3" />
<label class="title" for="item3">3</label>
<p class="content ml2">3</p>
</li>
<li class="item">
<input type="radio" name="item" class="radio-item" id="item4" />
<label class="title" for="item4">4</label>
<p class="content ml3">4</p>
</li>
</ul>
</div>
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布局的简单实例(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋友跟随小编一起看看吧2025-06-20- 本文给大家讲解CSS 的三种核心布局机制——普通流(Normal Flow)、浮动(Float)和定位(Positioning)对于创建灵活、响应式的网页至关重要,本文将深入探讨这三种机制的工作原2025-06-19
文章介绍如何用CSS实现角标效果,通过.active类结合::after和::before伪元素,利用定位、边框和旋转创建红色边框与白色三角形的提示标志,适用于按钮或卡片元素的视觉增强设计2025-06-19CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)
CSS Anchor Positioning是一项仍在草案中的新特性，由 Chrome 125 开始提供原生支持需启用实验 flag,它允许你在 CSS 中通过锚点（anchor）来相对于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比
CSS 中的 position 属性用于控制元素的定位方式，不同的定位方式会影响元素在页面中的布局和层叠关系,以下是 static、relative、absolute、fixed、sticky 的详细对比和应用2025-06-17CSS place-items: center解析与用法详解
place-items: center; 是一个强大的 CSS 简写属性，用于同时控制 网格(Grid) 和 弹性盒(Flexbox) 布局中的对齐方式，本文给大家介绍CSS place-items: center； 详解与用法2025-06-17
在日常开发中，我们经常需要让某个元素占据容器的剩余空间，本文将介绍5种不同的方法来实现这个需求，并分析各种方法的优缺点，感兴趣的朋友一起看看吧2025-06-17- CSS单位区别与使用场景总结：px绝对、vw/vh响应式,%继承父尺寸,em/rem文字缩放,vmin/vmax适应宽高变化,固定布局用px或%,响应式布局用vw/vh/rem,文字用em或rem，本文给大家2025-06-16
- 这篇文章主要介绍了CSS 样式表的四种应用方式及css注释的应用小结,本文通过实例代码给大家介绍的非常详细，感兴趣的朋友跟随小编一起看看吧2025-05-21
- 在CSS布局中，padding属性是控制元素内容与其边框之间距离的关键工具，本文介绍CSS基础中padding，通过本文的介绍，我们深入了解了padding的基本概念、简写方法以及它对元2025-05-16
最新评论