时间戳

首页 > 解决方案 > css3 选项卡问题中的 css3 选项卡

css - 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>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX X XXXXXX X XXXXXXX X XXXXXXX X

这是codepen的链接：https ://codepen.io/user1010/pen/NzYOqg

还是只有JS才有可能？

标签： cssmenutabs

解决方案

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

在下面的钢笔中，我给标签 5、6、7 和 8 命名为tabs2。

你的笔的工作叉：https ://codepen.io/anon/pen/KeobPV

推荐阅读