CSS实现Tab布局

头像
若邪
    阅读 11 分钟

    一、布局方式

    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
    若邪
    1.5k 声望64 粉丝

    划水摸鱼糊屎

    « 上一篇
    CSS中line-height与vertical-align
    下一篇 »
    将数据库事务从dao层提升到service层

    引用和评论

    推荐阅读
    头像
    还在封装 xxxForm，xxxTable 残害你的同事？试试这个工具

    若邪阅读 401

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 858

    0 条评论
    得票最新