纯css实现tab切换

<div class="tabBox">
                <input id="tab1" type="radio" name="tabs" checked>
                <label for="tab1"><a>tab1</a></label>
                <input id="tab2" type="radio" name="tabs">
                <label for="tab2"><a>tab2</a></label>
                <input id="tab3" type="radio" name="tabs">
                <label for="tab3"><a>tab3</a></label>		
                <section id="cent1">
                	<div>tab1</div>
                </section>
                <section id="cent2">
                	<div>tab2</div>
                </section>
                <section id="cent3">
                	<div>tab3</div>
                </section>
                
		</div>

<style type="text/css">
		input, section {clear: both;display: none;}
        label{float: left;line-height: 40px;margin-top: 7px;}
        label a{
           border-right: 1px solid #74808f;
           color: #000;
           font-size: 14px;
           line-height: 20px;
           display: inline-block;
           margin: 10px 0;
           width: 100px;
           text-align: center;
           margin-top: 7px;

         }
          label a:last-of-type a{
            border-right: none;
          }
          label a:first-of-type{
            margin-left: 10px;
          }
        #tab1:checked ~ #cent1, #tab2:checked ~ #cent2, #tab3:checked ~ #cent3 {display: block;}
	</style>