Skillfully using radio to realize pure CSS tab perfect Toggle Instance

Instance One

Effect chart

<! doctype html> 
 
  Instance two  pure CSS Implement nice tab tab toggle Effects 
 
 

<! doctype html> 
 
 
  instance three  CSS Radio tab Toggle Effects Instance page CSS code: 
 
 
 

. test_box {    width: 50%;     min-height: 250px;  
   margin: 1em auto;
    position: relative;
}. test_tab {    width: 25%;     margin-right: -1px;
    border: 1px solid  #ccc;
    border-bottom: 0;
    float: left;
}. test_label {    display: block;     padding-top: 5px;
    padding-bottom: 5px;
    background-color:  #eee;
    text-align: center; }. Test_radio,. test_tab_content {    position: absolute;     
left: -999em; }. test_radio:checked ~ .test_tab_content {    margin-top: -1px;      padding: 1em 2em;
    border: 1px solid  #ccc;
    left: 0;
    right: 0; }. test_radio:checked ~ .test_label {    background-color:  #fff;  
   border-bottom: 1px solid  #fff;
    position: relative;
    z-index: 1; }
 
 HTML code: 
 
 
 

<div>     <div>         <input  Type= "Radio"  id= "TestTabRadio1"  name= "tab"  checked= "Checked"  />          <label for= "TestTabRadio1" > tab 1</label>          <div>             <p> I am the tab 1 corresponding beauty </p>                      </div>      </div>     <div>           <input type= "Radio"  id= "TestTabRadio2"  name= "tab"  />          <label for= "TestTabRadio2" > tab 2</label>       &nBsp;  <div>             <p> I am the tab 2 corresponding beauty </p>                      </div>      </div>     <div>          <input type= "Radio"  id= "TestTabRadio3"  name= "tab"  />          <label for= "TestTabRadio3" > tab 3</label>          <div>             <p> I am the tab 3 corresponding beauty </p>                      </div>     &Nbsp;</div> </div>