css3选项卡问题中的css3选项卡

我想在4项选项卡中创建4项选项卡。我不知道是什么把功能搞砸了，但请看这里

对于一个包含4项的选项卡，它工作正常

 <main>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Codepen</label> 
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Dribbble</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Dropbox</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Drupal</label>

<section id="content1">
 <main>

<input id="tab5" type="radio" name="tabs" checked>
<label for="tab5">Codepen</label>

<input id="tab6" type="radio" name="tabs">
<label for="tab6">Dribbble</label>

<input id="tab7" type="radio" name="tabs">
<label for="tab7">Dropbox</label>

<input id="tab8" type="radio" name="tabs">
<label for="tab8">Drupal</label>

<section id="content5">
<p>
5
</p>
<p>
5
</p>
</section>

<section id="content6">
  <p>
6
</p>
<p>
6
   </p>
  </section>

 <section id="content7">
  <p>
 asdf
  </p>
 asdf
</section>

<section id="content8">
 <p>
 8
</p>
<p>
 8
</p>
</section>

 </main>
</section>

<section id="content2">
  <p>
2
   </p>
 <p>
 2
  </p>
</section>

<section id="content3">
  <p>
 3
 </p>
 <p>
   3
   </p>
 </section>
  <section id="content4">
 <p>
  4
 </p>
 <p>
 4
 </p>
  </section>
  </main>

代码笔
运球
升降箱
猪跑
代码笔
运球
升降箱
猪跑

5.


5.


6.


6.


asdf

asdf

8.


8.


2.


2.


3.


3.


4.


4.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

以下是代码笔的链接：

---

还是只有JS才有可能？

您需要为content1中的单选按钮指定不同于其他按钮的名称。目前，单击tab5（例如）会自动取消选中tab1，因为它们属于同一组

在下面的笔中，我为选项卡5、6、7和8指定了名称

tabs2

笔的工作叉：