SOURCE

console 命令行工具 X clear

                    
>
console
<div class="box">
  <div class="tab">
    <input type="radio" id="TabRadio1" class="radio" name="tab" checked="checked"
    />
    <label class="label" for="TabRadio1">
      选项卡1
    </label>
    <div class="tab_content">
      <p>
        我是选项卡1对应的美女
      </p>
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="TabRadio2" class="radio" name="tab" />
    <label class="label" for="TabRadio2">
      选项卡2
    </label>
    <div class="tab_content">
      <p>
        我是选项卡2对应的美女
      </p>
      <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
    </div>
  </div>
</div>
.box {
  position: relative;
}
.tab {
  float: left;
}
.label {
  display: block;
}
.radio,
.tab_content {
  position: absolute;
  left: -999em;
}
.radio:checked ~ .tab_content {
  left: 0;
  right: 0;
}
.radio:checked ~ .label {
  background-color: red;
  // position: relative;
}