纯CSS制作的TAB选项卡

来源:互联网  时间:2017-12-20    阅读:   我要吐槽    阿里云幸运券

这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容。具体请看下面代码。

  1. <ul class="tabs"> 
  2. <li> 
  3. <input type="radio" name="tabs" id="tab1" checked /> 
  4. <label for="tab1">选项卡 1</label> 
  5. <div id="tab-content1" class="tab-content"> 
  6. <p>选项卡内容 1</p> 
  7. </div> 
  8. </li> 
  9.  
  10. <li> 
  11. <input type="radio" name="tabs" id="tab2" /> 
  12. <label for="tab2">选项卡 2</label> 
  13. <div id="tab-content2" class="tab-content"> 
  14. <p>选项卡内容 2</p> 
  15. </div> 
  16. </li> 
  17. </ul> 
  1. * { 
  2.   margin0
  3.   padding0
  4.   -webkit-box-sizing: border-box; 
  5.   -moz-box-sizing: border-box; 
  6.   box-sizing: border-box; 
  7.  
  8. body { 
  9.   padding20px
  10.   text-alignleft
  11.   font-family: Lato; 
  12.   color#fff
  13.   background#9b59b6
  14.  
  15. .tabs { 
  16.   width650px
  17.   floatnone
  18.   list-stylenone
  19.   positionrelative
  20.   margin80px 0 0 10px
  21.   text-alignleft
  22. .tabs li { 
  23.   floatleft
  24.   displayblock
  25. .tabs input[type="radio"] { 
  26.   positionabsolute
  27.   top: -9999px
  28.   left: -9999px
  29. .tabs label { 
  30.   displayblock
  31.   padding14px 21px
  32.   border-radius: 2px 2px 0 0
  33.   font-size20px
  34.   font-weightnormal
  35.   text-transformuppercase
  36.   background#8e44ad
  37.   cursorpointer
  38.   positionrelative
  39.   top: 4px
  40.   -webkit-transition: all 0.2s ease-in-out; 
  41.   -moz-transition: all 0.2s ease-in-out; 
  42.   -o-transition: all 0.2s ease-in-out; 
  43.   transition: all 0.2s ease-in-out; 
  44. .tabs label:hover { 
  45.   background#703688
  46. .tabs .tab-content { 
  47.   z-index2
  48.   displaynone
  49.   overflowhidden
  50.   width100%
  51.   font-size17px
  52.   line-height25px
  53.   padding25px
  54.   positionabsolute
  55.   top: 53px
  56.   left: 0
  57.   background#612e76
  58. .tabs [id^="tab"]:checked + label { 
  59.   top: 0
  60.   padding-top17px
  61.   background#612e76
  62. .tabs [id^="tab"]:checked ~ [id^="tab-content"] { 
  63.   displayblock

关于兼容性,因为是用CSS3来制作的,所以如果不支持CSS3的浏览将会出现不兼容的情况。

Tags:CSS  TAB选项卡  

参与讨论