https://hyper-text.org/archives/2013/05/css_only_tab_ui.shtml

<!– ↓ここからサンプル↓ –>
<div class="sample">
 
 <div id="tab01">
  <div id="tab02">
   <div id="tab03">
 
    <!– ↓タブ↓ –>
    <ul id="tab">
     <li><a href="#tab01">W3C</a></li>
     <li><a href="#tab02">XHTML</a></li>
     <li><a href="#tab03">CSS</a></li>
    </ul>
    <!– ↑タブ↑ –>
 
    <div class="contents">
 
     <!– ↓タブ 1 の内容↓ –>
     <div class="tab01">
      <section>
       <h1>World Wide Web Consortium</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 1 の内容↑ –>
 
     <!– ↓タブ 2 の内容↓ –>
     <div class="tab02">
      <section>
       <h1>XHTML</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 2 の内容↑ –>
 
     <!– ↓タブ 3 の内容↓ –>
     <div class="tab03">
      <section>
       <h1>Cascading Style Sheets</h1>
       <p>…省略…</p>
      </section>
     </div>
     <!– ↑タブ 3 の内容↑ –>
 
    <!– .contents –></div>
 
   </div>
  </div>
 </div>
 
<!– .sample –></div>
<!– ↑ここまでサンプル↑ –>

 .sample .contents {
  position: relative;
}
.sample .contents div {
  background: #fff;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
}

/* タブの表示切替関連 */
.sample .contents div {
  opacity: 0;
  z-index: 1;
}
.sample #tab li:first-child a {
  background: #333;
  color: #fff;
}
.sample .contents div:first-child {
  opacity: 1;
  z-index: 2;
}
.sample #tab01:target .contents .tab01,
.sample #tab02:target .contents .tab02,
.sample #tab03:target .contents .tab03 {
  opacity: 1;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  z-index: 2;
}
.sample #tab01:target .contents div:not([class=”tab01″]),
.sample #tab02:target .contents div:not([class=”tab02″]),
.sample #tab03:target .contents div:not([class=”tab03″]) {
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  z-index: 1;
}
.sample #tab01:target #tab li a[href$=”tab01″],
.sample #tab02:target #tab a[href$=”tab02″],
.sample #tab03:target #tab a[href$=”tab03″] {
  background: #333;
  color: #fff;
  -webkit-transition: background .5s;
  transition: background .5s;
}
.sample :not([id=”tab01″]):target #tab li a[href$=”tab01″] {
  background: #fff;
  color: #22aacc;
}