CSS だけでタブを作るぞ！

`input[type="radio"]` を利用した CSS だけで作るタブ

作ったやつ！

See the Pen Tab without JavaScript by KIKIKI (@kikiki_kiki) on CodePen.

HTML

<div class="tab">
  <input type="radio" id="tab1" name="tab" checked />
  <input type="radio" id="tab2" name="tab" />
  <input type="radio" id="tab3" name="tab" />
  <nav class="tabButtons">
    <label class="tabButon" for="tab1">Tab1</label>
    <label class="tabButon" for="tab2">Tab2</label>
    <label class="tabButon" for="tab3">Tab3</label>
  </nav>
  <div class="tabBody">
    <section class="tabContent" data-tab="tab1">TAB1 Content<section>
    <section class="tabContent" data-tab="tab2">TAB2 Content<section>
    <section class="tabContent" data-tab="tab3">TAB3 Content<section>
  </div>
</div>

CSS

input[name="tab"] {
  display: none;
}
.tabButtons {
  display: flex;
  align-items: stretch;
}
.tabButon {
  cursor: pointer;
  display: block;
  padding: 0.6rem 2rem;
}
.tabBody {
  display: flex;
  align-items: stretch;
}
.tabContent {
  display: none;
  padding: 1rem 1.25rem;
  width: 100%;
}
/* active 表示 */
#tab1:checked ~ .tabButtons .tabButon[for="tab1"],
#tab2:checked ~ .tabButtons .tabButon[for="tab2"],
#tab3:checked ~ .tabButtons .tabButon[for="tab3"]
{
  cursor: default;
  background-color: #fbcb62;
}
#tab1:checked ~ .tabBody .tabContent[data-tab="tab1"],
#tab2:checked ~ .tabBody .tabContent[data-tab="tab2"],
#tab3:checked ~ .tabBody .tabContent[data-tab="tab3"] {
  display: block;
}

~ (general sibling combinator) セレクタを利用して TAB ボタンとコンテンツのカレント表示を実現する

一般兄弟結合子 (general sibling combinator, ~) は 2 個のセレクターを結びつけ、 1 つ目の要素の後に 2 つ目の要素のがあり（直後である必要はない）、かつ両者が同じ親要素の子であるすべてのパターンに一致します。
/ 任意の画像の兄弟で、
   その画像より後方にある段落 /
img ~ p {
  color: red;
}
cf. 一般兄弟結合子 - CSS&colon; カスケーディングスタイルシート | MDN

動きそんなに必要ないなら CSS で十分な気がします。
おわり ₍ ᐢ. ̫ .ᐢ ₎

[参考]