<style>
*{margin:0px;padding:0px;}
body{margin:0px;padding:0px;font-size:14px;color:#000;font-family:"Microsoft Yahei", Tahoma, Arial, SimSun, "Hiragino Sans GB", PMingLiu, Verdana, sans-serif;text-align: center}
h1 {font-weight: 500;margin:30px 0;}
p { margin: 0 0 10px; }
.radiotabs {width:343px; margin:30px auto 10px;}
input.tabs {display:none;}
input.tabs + label {display:block; font:normal 12px/30px arial, sans-serif; text-decoration:none; color:#000;float:left;position:relative; padding:0 20px; margin-right:2px;width:100px}
input.tabs + label img {position:absolute; left:0; top:0; width:100%; height:100%; cursor:pointer;}
.tabcontent {width:300px; padding:20px; border:1px solid #ddd; border-radius:0 5px 5px 5px; background:#fff; position:relative; z-index:10; display:none; clear:left; top:-1px;}
.tabcontent {display:none;color:#000;}
input.tabs:checked + label {border:1px solid #ddd;border-radius:5px 5px 0 0;background-color:#fff; border-bottom:1px solid #fff; color:#000; z-index:20;}
input#tab1:checked ~ section#wx {display:block;}
input#tab2:checked ~ section#alipay {display:block;}
</style>
<section class="radiotabs">
<input type="radio" name="tab" id="tab1" class="tabs" checked="checked">
<label for="tab1">
tab1
</label>
<input type="radio" name="tab" id="tab2" class="tabs">
<label for="tab2">
tab2
</label>
<section id="wx" class="tabcontent">
tab1
</section>
<section id="alipay" class="tabcontent">
tab2
</section>
</section>