纯css实现tab切换

<div class="container">
  <div class="box">
    <input type="radio" value="front" name="direction" id="front" checked>
    <label for="front" class="text">Tab1</label>
  </div>
  <div class="content-front">这里是内容11111</div>
  
  <div class="box">
    <input type="radio" value="behind" name="direction" id="behind">
    <label for="behind" class="text">Tab2</label>
  </div>
  <div class="content-behind">这里是内容22222</div>
  
  <div class="box">
    <input type="radio" value="left" name="direction" id="left">
    <label for="left" class="text">Tab3</label>
  </div>
  <div class="content-left">这里是内容33333</div>
  
  <div class="box">
    <input type="radio" value="right" name="direction" id="right">
    <label for="right" class="text">Tab4</label>
  </div>
  <div class="content-right">这里是内容44444</div>
</div>