tab_控件

<!--切换控件start-->
<ul class="listItem tab-container radio ">
   <li>
      <input class="tab-toggle" id="tab-1" type="radio" name="toggle" checked />
      <label data-title="Tab 1" class="tab l-b" for="tab-1">人口结构</label>
      <div id="ageStatistics" class="main01 tab-content-container">1</div>
   </li>
   <li>
      <input class="tab-toggle" id="tab-2" type="radio" name="toggle" />
      <label class="tab" for="tab-2">年龄结构</label>
      <div id="ethnicStatistics" class="main01 tab-content-container"> 2</div>
   </li>
   <li>
      <input class="tab-toggle" id="tab-3" type="radio" name="toggle" />
      <label class="tab" for="tab-3">健康状况</label>
      <div id="ethnicStatistics" class="main01 tab-content-container">3</div>
   </li>
   <li>
      <input class="tab-toggle" id="tab-4" type="radio" name="toggle" />
      <label class="tab" for="tab-4">教育情况</label>
      <div id="ethnicStatistics" class="main01 tab-content-container"> 4</div>
   </li>
</ul>
<!--切换控件end-->

/*切换按钮 start*/
ul.listItem.tab-container.radio{  position:absolute; margin:0; width:22.5vw; height:23.8vh; }
ul.tab-container>li{ }
ul.tab-container>li              .tab{   cursor:pointer; opacity:1;  width:95px; height:32px; margin:0; position:absolute; top:20px; z-index:1;  color:white; padding:0; display:flex; justify-content:center; align-items:center;  font-size: 14px;font-family: Source Han Sans CN;font-weight:400; background: rgba(53,255,210,0.12);border: 1px solid #35FFD2; opacity:0.3; }
ul.tab-container>li:first-child  .tab{  left:20px; }
ul.tab-container>li:nth-child(2) .tab{  left:123px;  }
ul.tab-container>li:nth-child(3) .tab{  left:226px;  }
ul.tab-container>li:nth-child(4) .tab{  left:328px;  }

ul.tab-container>li .tab-content-container{ height:23.7vh  !important;  opacity:0; overflow: hidden;  position: absolute; top:0px; left:0; right:0; z-index:0; }

ul.tab-container>li input.tab-toggle{ display:none; }

ul.tab-container>li input.tab-toggle.active + .tab,
ul.tab-container>li input.tab-toggle:checked + .tab { opacity:1; color:#23FFF2; }

ul.tab-container>li input.tab-toggle.active ~ .tab-content-container,
ul.tab-container>li input.tab-toggle:checked ~ .tab-content-container {height:auto;opacity: 1; }
/*切换按钮 end*/