纯CSS打造的tab选项卡效果

css部分：

<style>
section {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
label {
  background: #eee; 
  border: 1px solid #ddd; 
  padding: .7em 1em;
  cursor: pointer;
  z-index: 1;
  margin-left: -1px;
}
label:first-of-type {
  margin-left: 0;
}
div {
  width: 100%;
  margin-top: -1px;
  padding: 1em;
  border: 1px solid #ddd;
  -webkit-order: 1;
  order: 1;
}
input[type=radio], div {
  display: none;
}
input[type=radio]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff;
}
input[type=radio]:checked + label + div {
  display: block;
}
</style>

html部分：

<section>
<input id="tab-one" type="radio" name="grp" checked="checked" /> <label for="tab-one">Tab One</label> 
<div>
	11111111111111111111111
</div>
<input id="tab-two" type="radio" name="grp" /> <label for="tab-two">Tab Two</label> 
<div>
	22222222222222222
</div>
<input id="tab-three" type="radio" name="grp" /> <label for="tab-three">Tab Three</label> 
<div>
	3333333333333333333333
</div>
</section>