<div class="tab-box">
  
  <div class="tab" id="tab1">Tab1 无需JS</div>
  <div class="tab" id="tab2">Tab2 css :target伪类</div>
  <div class="tab" id="tab3">Tab3 标签切换效果</div>
  
  <div class="button-box">
    <a href="#tab1" class="button">Tab1</a>
    <a href="#tab2" class="button">Tab2</a>
    <a href="#tab3" class="button">Tab3</a>
  </div>
  
</div>
.tab-box{
  position: relative;
  width: 200px;
  height: 130px;
}
.tab{
  background: aliceblue;
  width: 100%;
  height: 100%;
  border: gray solid 2px;
  border-radius: 5px;
  position: absolute;
}
.button-box{
  position: absolute;
  bottom: -28px;
  left: 5px;
}
.button{
  display: inline-block;
  margin-left: 5px;
  padding-left: 4px;
  padding-right: 4px;
  text-decoration: none;
  color: #000000;
  background: aliceblue;
  border: gray solid 2px;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;  
}
#tab1:target, #tab2:target, #tab3:target{
  z-index:1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.