内容1
devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS实现Tab布局

作者：小丑西瓜9 | 2024-02-20 00:58:57

赞

踩

css 多tab布局

一、布局方式

1、内容与tab分离
  1. <div class="container">
  2.    <div class="tab-content">
  3.      <div id="item1" class="item">内容1</div>
  4.      <div id="item2" class="item">内容2</div>
  5.      <div id="item3" class="item">内容3</div>
  6.      <div id="item4" class="item">内容4</div>
  7.    </div>
  8.    <div class="tab-control">
  9.      <ul>
  10.         <li><a href="#item1">内容1</a></li>
  11.         <li><a href="#item2">内容2</a></li>
  12.         <li><a href="#item3">内容3</a></li>
  13.         <li><a href="#item4">内容4</a></li>
  14.      </ul>
  15.    </div>
  16. </div>
  1. ul,li{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10. }
  11. .tab-content{
  12.   width:100%;
  13.   height:80%;
  14.   overflow:hidden;
  15. }
  16. .tab-content .item{
  17.   width:100%;
  18.   height:100%;
  19. }
  20. .tab-control{
  21.   width:100%;
  22.   height:20%;
  23. }
  24. .tab-control ul{
  25.   height:100%;
  26. }
  27. .tab-control li{
  28.   width:25%;
  29.   height:100%;
  30.   float:left;
  31.   border:1px solid silver;
  32.   box-sizing:border-box;
  33.   background-color:white;
  34.   cursor: pointer;
  35. }
  36. .tab-control li:hover{
  37.   background-color:#7b7474
  38. }
  39. .tab-control a{
  40.   display:inline-block;
  41.   width:100%;
  42.   height:100%;
  43.   line-height:100%;
  44.   text-align:center;
  45.   text-decoration: none;
  46. }
  47. .tab-control a::after{
  48.   content:"";
  49.   display:inline-block;
  50.   height:100%;
  51.   vertical-align:middle;
  52. }
  53. .tab-content .item:target{
  54.   background:yellow;
  55. }

2、内容与tab一体
  1. <div class="container">
  2.    <ul>
  3.      <li class="item active">
  4.        <p class="title">1</p>
  5.        <p class="content">1</p>
  6.      </li>
  7.      <li class="item">
  8.        <p class="title">2</p>
  9.        <p class="content ml1">2</p>
  10.      </li>
  11.      <li class="item">
  12.        <p class="title">3</p>
  13.        <p class="content ml2">3</p>
  14.      </li>
  15.      <li class="item">
  16.        <p class="title">4</p>
  17.        <p class="content ml3">4</p>
  18.      </li>
  19.    </ul>
  20. </div>
  1. ul,li,p{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10.   border:1px solid silver;
  11. }
  12. .container ul{
  13.   width:100%;
  14.   height:100%;
  15.   overflow:hidden;
  16. }
  17. .container .item{
  18.   float:left;
  19.   width:25%;
  20.   height:100%;
  21.   background-color:white;
  22. }
  23. .container .item .title{
  24.   line-height:40px;
  25.   border:1px solid silver;
  26.   box-sizing:border-box;
  27.   text-align:center;
  28.   cursor:pointer;
  29. }
  30. .container .item .content{
  31.   width:400%;
  32.   height:100%;
  33.   background-color:yellow;
  34. }
  35. .ml1{
  36.   margin-left:-100%;
  37. }
  38. .ml2{
  39.   margin-left:-200%;
  40. }
  41. .ml3{
  42.   margin-left:-300%;
  43. }
  44. .active{
  45.   position:relative;
  46.   z-index:1
  47. }
  48. .container .item:hover{
  49.   position:relative;
  50.   z-index:1
  51. }
  52. .container .item:hover .title{
  53.   border-bottom:none;
  54.   background-color:yellow;
  55. }

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

二、CSS实现交互

1、锚点实现（target）

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

  1. <div class="container">
  2.    <div class="tab-content">
  3.      <div id="item1" class="item">内容1</div>
  4.      <div id="item2" class="item">内容2</div>
  5.      <div id="item3" class="item">内容3</div>
  6.      <div id="item4" class="item">内容4</div>
  7.    </div>
  8.    <div class="tab-control">
  9.      <ul>
  10.         <li><a href="#item1">内容1</a></li>
  11.         <li><a href="#item2">内容2</a></li>
  12.         <li><a href="#item3">内容3</a></li>
  13.         <li><a href="#item4">内容4</a></li>
  14.      </ul>
  15.    </div>
  16. </div>
  1. ul,li{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10. }
  11. .tab-content{
  12.   width:100%;
  13.   height:80%;
  14.   overflow:hidden;
  15. }
  16. .tab-content .item{
  17.   width:100%;
  18.   height:100%;
  19. }
  20. .tab-control{
  21.   width:100%;
  22.   height:20%;
  23. }
  24. .tab-control ul{
  25.   height:100%;
  26. }
  27. .tab-control li{
  28.   width:25%;
  29.   height:100%;
  30.   float:left;
  31.   border:1px solid silver;
  32.   box-sizing:border-box;
  33.   background-color:white;
  34.   cursor: pointer;
  35. }
  36. .tab-control li:hover{
  37.   background-color:#7b7474
  38. }
  39. .tab-control a{
  40.   display:inline-block;
  41.   width:100%;
  42.   height:100%;
  43.   line-height:100%;
  44.   text-align:center;
  45.   text-decoration: none;
  46. }
  47. .tab-control a::after{
  48.   content:"";
  49.   display:inline-block;
  50.   height:100%;
  51.   vertical-align:middle;
  52. }

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

  1. ul,li{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10. }
  11. .tab-content{
  12.   position:relative;
  13.   width:100%;
  14.   height:80%;
  15.   overflow:hidden;
  16. }
  17. .tab-content .item{
  18.   position:absolute;
  19.   left:0;
  20.   top:0;
  21.   width:100%;
  22.   height:100%;
  23. }
  24. .tab-control{
  25.   width:100%;
  26.   height:20%;
  27. }
  28. .tab-control ul{
  29.   height:100%;
  30. }
  31. .tab-control li{
  32.   width:25%;
  33.   height:100%;
  34.   float:left;
  35.   border:1px solid silver;
  36.   box-sizing:border-box;
  37.   background-color:white;
  38.   cursor: pointer;
  39. }
  40. .tab-control li:hover{
  41.   background-color:#7b7474
  42. }
  43. .tab-control a{
  44.   display:inline-block;
  45.   width:100%;
  46.   height:100%;
  47.   line-height:100%;
  48.   text-align:center;
  49.   text-decoration: none;
  50. }
  51. .tab-control a::after{
  52.   content:"";
  53.   display:inline-block;
  54.   height:100%;
  55.   vertical-align:middle;
  56. }
  57.  
  58. .tab-content .item:target{
  59.   z-index:1;
  60.   background-color:yellow;
  61. }

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

（2）针对布局二：

  1. <div class="container">
  2.    <ul>
  3.      <li class="item active" id="item1">
  4.        <p class="title"><a href="#item1">1</a></p>
  5.        <p class="content">1</p>
  6.      </li>
  7.      <li class="item" id="item2">
  8.        <p class="title"><a href="#item2">2</a></p>
  9.        <p class="content ml1">2</p>
  10.      </li>
  11.      <li class="item" id="item3">
  12.        <p class="title"><a href="#item3">3</a></p>
  13.        <p class="content ml2">3</p>
  14.      </li>
  15.      <li class="item" id="item4">
  16.        <p class="title"><a href="#item4">4</a></p>
  17.        <p class="content ml3">4</p>
  18.      </li>
  19.    </ul>
  20. </div>
  1. ul,
  2. li,
  3. p {
  4.   margin: 0;
  5.   padding: 0;
  6.   list-style: none;
  7. }
  8.  
  9. .container {
  10.   width: 400px;
  11.   height: 300px;
  12.   background-color: silver;
  13.   border: 1px solid silver;
  14. }
  15.  
  16. .container ul {
  17.   width: 100%;
  18.   height: 100%;
  19.   overflow: hidden;
  20. }
  21.  
  22. .container .item {
  23.   float: left;
  24.   width: 25%;
  25.   height: 100%;
  26.   background-color: white;
  27. }
  28.  
  29. .container .item .title {
  30.   line-height: 40px;
  31.   border: 1px solid silver;
  32.   box-sizing: border-box;
  33.   text-align: center;
  34.   cursor: pointer;
  35. }
  36. .container .item a {
  37.   display:inline-block;
  38.   width:100%;
  39.   height:100%;
  40.   text-decoration: none;
  41. }
  42.  
  43. .container .item .content {
  44.   width: 400%;
  45.   height: 100%;
  46.   background-color: yellow;
  47. }
  48.  
  49. .ml1 {
  50.   margin-left: -100%;
  51. }
  52.  
  53. .ml2 {
  54.   margin-left: -200%;
  55. }
  56.  
  57. .ml3 {
  58.   margin-left: -300%;
  59. }
  60.  
  61. .active {
  62.   position: relative;
  63.   z-index: 1
  64. }
  65.  
  66. .container .item:target {
  67.   position: relative;
  68.   z-index: 1
  69. }
  70.  
  71. .container .item:target .title {
  72.   border-bottom: none;
  73.   background-color: yellow;
  74. }
2、hover实现

（1）针对布局一：
无法简单的通过CSS实现

（2）针对布局二：

  1. <div class="container">
  2.    <ul>
  3.      <li class="item active">
  4.        <p class="title">1</p>
  5.        <p class="content">1</p>
  6.      </li>
  7.      <li class="item">
  8.        <p class="title">2</p>
  9.        <p class="content ml1">2</p>
  10.      </li>
  11.      <li class="item">
  12.        <p class="title">3</p>
  13.        <p class="content ml2">3</p>
  14.      </li>
  15.      <li class="item">
  16.        <p class="title">4</p>
  17.        <p class="content ml3">4</p>
  18.      </li>
  19.    </ul>
  20. </div>
  1. ul,li,p{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10.   border:1px solid silver;
  11. }
  12. .container ul{
  13.   width:100%;
  14.   height:100%;
  15.   overflow:hidden;
  16. }
  17. .container .item{
  18.   float:left;
  19.   width:25%;
  20.   height:100%;
  21.   background-color:white;
  22. }
  23. .container .item .title{
  24.   line-height:40px;
  25.   border:1px solid silver;
  26.   box-sizing:border-box;
  27.   text-align:center;
  28.   cursor:pointer;
  29. }
  30. .container .item .content{
  31.   width:400%;
  32.   height:100%;
  33.   background-color:yellow;
  34. }
  35. .ml1{
  36.   margin-left:-100%;
  37. }
  38. .ml2{
  39.   margin-left:-200%;
  40. }
  41. .ml3{
  42.   margin-left:-300%;
  43. }
  44. .active{
  45.   position:relative;
  46.   z-index:1
  47. }
  48. .container .item:hover{
  49.   position:relative;
  50.   z-index:1
  51. }
  52. .container .item:hover .title{
  53.   border-bottom:none;
  54.   background-color:yellow;
  55. }
3、label与:checked实现

（1）针对布局一：

  1. <div class="container">
  2.   <div class="tab-content">
  3.     <input type="radio" name="item" class="radio-item" id="item1" checked/>
  4.     <div class="item">内容1</div>
  5.     <input type="radio" name="item" class="radio-item" id="item2" />
  6.     <div class="item">内容2</div>
  7.     <input type="radio" name="item" class="radio-item" id="item3" />
  8.     <div class="item">内容3</div>
  9.     <input type="radio" name="item" class="radio-item" id="item4" />
  10.     <div class="item">内容4</div>
  11.   </div>
  12.   <div class="tab-control">
  13.     <ul>
  14.       <li><label for="item1">内容1</label></li>
  15.       <li><label for="item2">内容2</label></li>
  16.       <li><label for="item3">内容3</label></li>
  17.       <li><label for="item4">内容4</label></li>
  18.     </ul>
  19.   </div>
  20. </div>
  1. ul,
  2. li {
  3.   margin: 0;
  4.   padding: 0;
  5.   list-style: none;
  6. }
  7.  
  8. .container {
  9.   width: 400px;
  10.   height: 300px;
  11.   background-color: silver;
  12. }
  13.  
  14. .tab-content {
  15.   position: relative;
  16.   width: 100%;
  17.   height: 80%;
  18.   overflow: hidden;
  19. }
  20.  
  21. input {
  22.   margin: 0;
  23.   width: 0;
  24. }
  25.  
  26. .tab-content .item {
  27.   position: absolute;
  28.   left: 0;
  29.   top: 0;
  30.   width: 100%;
  31.   height: 100%;
  32. }
  33.  
  34. .tab-control {
  35.   width: 100%;
  36.   height: 20%;
  37. }
  38.  
  39. .tab-control ul {
  40.   height: 100%;
  41. }
  42.  
  43. .tab-control li {
  44.   width: 25%;
  45.   height: 100%;
  46.   float: left;
  47.   border: 1px solid silver;
  48.   box-sizing: border-box;
  49.   background-color: white;
  50. }
  51.  
  52. .tab-control li:hover {
  53.   background-color: #7b7474
  54. }
  55.  
  56. .tab-control label {
  57.   display: inline-block;
  58.   width: 100%;
  59.   height: 100%;
  60.   line-height: 100%;
  61.   text-align: center;
  62.   text-decoration: none;
  63.   cursor: pointer;
  64. }
  65.  
  66. .tab-control label::after {
  67.   content: "";
  68.   display: inline-block;
  69.   height: 100%;
  70.   vertical-align: middle;
  71. }
  72. .tab-content .radio-item{
  73.   display:none;
  74. }
  75. .tab-content .radio-item:checked+.item {
  76.   z-index: 1;
  77.   background-color: yellow;
  78. }

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

（2）针对布局二：

  1. <div class="container">
  2.    <ul>
  3.      <li class="item active">
  4.        <input type="radio" name="item" class="radio-item" id="item1" checked/>
  5.        <label class="title" for="item1">1</label>
  6.        <p class="content">1</p>
  7.      </li>
  8.      <li class="item">
  9.        <input type="radio" name="item" class="radio-item" id="item2" />
  10.        <label class="title" for="item2">2</label>
  11.        <p class="content ml1">2</p>
  12.      </li>
  13.      <li class="item">
  14.        <input type="radio" name="item" class="radio-item" id="item3" />
  15.        <label class="title" for="item3">3</label>
  16.        <p class="content ml2">3</p>
  17.      </li>
  18.      <li class="item">
  19.        <input type="radio" name="item" class="radio-item" id="item4" />
  20.        <label class="title" for="item4">4</label>
  21.        <p class="content ml3">4</p>
  22.      </li>
  23.    </ul>
  24. </div>
  1. ul,li,p{
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. .container{
  7.   width:400px;
  8.   height:300px;
  9.   background-color:silver;
  10.   border:1px solid silver;
  11. }
  12. .container ul{
  13.   width:100%;
  14.   height:100%;
  15.   overflow:hidden;
  16. }
  17. .container .item{
  18.   float:left;
  19.   width:25%;
  20.   height:100%;
  21.   background-color:white;
  22. }
  23. .container .item .title{
  24.   display:inline-block;
  25.   width:100%;
  26.   line-height:40px;
  27.   border:1px solid silver;
  28.   box-sizing:border-box;
  29.   text-align:center;
  30.   cursor:pointer;
  31. }
  32. .container .item .content{
  33.   position:relative;
  34.   width:400%;
  35.   height:100%;
  36.   background-color:yellow;
  37. }
  38. .ml1{
  39.   margin-left:-100%;
  40. }
  41. .ml2{
  42.   margin-left:-200%;
  43. }
  44. .ml3{
  45.   margin-left:-300%;
  46. }
  47. .radio-item{
  48.   display:none;
  49. }
  50. .radio-item:checked~.title{
  51.   background-color:yellow;
  52.   border-bottom:none;
  53. }
  54. .radio-item:checked~.content{
  55.   background-color:yellow;
  56.   z-index:1;
  57. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/117634
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。