当我单击我的选项卡时，两个选项卡都会被选中

Question

soo 我的网站上有一些选项卡（不是导航栏），前两个选项卡（在我网站的 20 世纪 80 年代部分）工作正常。但是，当我从不同部分选择另一个选项卡（例如 1990 年代或 2000 年代）时，两个选项卡都会被选中，我无法在两个选项卡之间切换，但内容会发生变化。

链接到我的代码笔

.punk1 {
  position: relative;
  min-height: 200px;
  clear: both;
  margin: 25px 0;
}

.tab {
  float: left;
}
.tab label {
  background: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}
.tab [type="radio"] {
  display: none;
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}
[type="radio"]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 1;
}
[type="radio"]:checked ~ label ~ .content {
  z-index: 1;
}

<title> Music Genre Project </title>
<marquee behavior="alternate" scrollamount="15">
  <h1> Punk </h1>
</marquee>
<header>
  <nav>
    <ul class="tabs">
      <li><a href="#80s"> 1980s </a></li>
      <li><a href="#90s"> 1990s </a></li>
      <li><a href="#00s"> 2000s </a></li>
    </ul>
  </nav>
</header>
<div class="eight">
<h2 id="80s"> 1980s </h2>
</div>
<div class="punk1">
  <div class="tab">
    <input type="radio" id="tab-1" name="tab-group-1" checked>
    <label for="tab-1">Deftones</label>
    <div class="content">
      founded in 1988 in Sacramento, CA
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-2" name="tab-group-1">
    <label for="tab-2">Radiohead</label>
    <div class="content">
      formed in Abingdon, Oxfordshire in 1985
    </div>
  </div>
</div>
<div class="nine">
<h2 id="90s"> 1990s </h2>
</div>
<div class="punk1">
  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-3" checked>
    <label for="tab-3">blink-182</label>
    <div class="content">
      formed in Poway, California, in 1992
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-4" name="tab-group-4">
    <label for="tab-4">Three Days Grace</label>
    <div class="content">
      formed in Norwood, Ontario, in 1992
    </div>
  </div>
</div>
<div class="zero">
<h2 id="00s"> 2000s </h2>
</div>
<div class="punk1">
  <div class="tab">
    <input type="radio" id="tab-5" name="tab-group-5" checked>
    <label for="tab-5">My Chemical Romance</label>
    <div class="content">
      formed in Newark, New Jersey in 2001
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-6" name="tab-group-6">
    <label for="tab-6">Panic! at the Disco</label>
    <div class="content">
      formed Las Vegas, Nevada in 2004
    </div>
  </div>
</div>
<center>
  <h3> Designed By </h3>
  <br />
  <img src="https://i.postimg.cc/h41wj9Sm/Pink-Yellow-Star-Y2k-Style-Streetwear-Logo.png" class="logo" alt="Company Logo">
</center>

我尝试删除第一个选项卡中的“选中”，但这没有帮助。如果我为每个部分创建一个新课程，我不知道该怎么办。

Answer 1

要让选项卡一起播放，它们需要属于同一组。在这种情况下，

tab-group-3

。

<div class="punk1">
  <div class="tab">
    <input type="radio" id="tab-3" name="tab-group-3" checked>
    <label for="tab-3">blink-182</label>
    <div class="content">
      formed in Poway, California, in 1992
    </div>
  </div>
  <div class="tab">
    <input type="radio" id="tab-4" name="tab-group-3">
    <label for="tab-4">Three Days Grace</label>
    <div class="content">
      formed in Norwood, Ontario, in 1992
    </div>
  </div>
</div>