html - 页面上的多个选项卡 - HTML CSS

Question

我有以下代码:Link

问题是标签不会同时激活，当一个是

active 另一个被禁用，我不知道如何让它工作。我有

仅使用 HTML 和 CSS

我想要的是两者都在选项卡 1 中处于事件状态并且我们保持事件状态

尽管我们有不同的选项卡，因为我的想法是添加更多的 div

标签。我留下了 CodePen 的链接，并在此处插入了代码。

.tabs {
	display: flex;
	flex-wrap: wrap; 
}
.tabs label {
	order: 1; 
	display: block;
	padding: 1rem 2rem;
	cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
}
.tabs .tab {
  order: 99; 
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #fff;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}

<div class="tabs">
            <input type="radio" name="tab" id="tabone" checked="checked">
            <label for="tabone">Tab One</label>
            <div class="tab">
              <h1>Tab One Content</h1>
            </div>
            <input type="radio" name="tab" id="tabtwo">
            <label for="tabtwo">Tab Two</label>
            <div class="tab">
              <h1>Tab Two Content</h1>
            </div>
            <input type="radio" name="tab" id="tabthree">
            <label for="tabthree">Tab Three</label>
            <div class="tab">
              <h1>Tab Three Content</h1>
            </div>
          </div>
          <br><br><br>
          <div class="tabs">
                <input type="radio" name="tab" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

Answer 1

              <div class="tabs">
                <input type="radio" name="tab2" id="tabfour" checked="checked">
                <label for="tabfour">Tab One</label>
                <div class="tab">
                  <h1>Tab One Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabfive">
                <label for="tabfive">Tab Two</label>
                <div class="tab">
                  <h1>Tab Two Content</h1>
                </div>
                <input type="radio" name="tab2" id="tabsix">
                <label for="tabsix">Tab Three</label>
                <div class="tab">
                  <h1>Tab Three Content</h1>
                </div>
              </div>

对于第二部分，为每组单选按钮的 name 属性添加不同的值。您之前所做的是将 checked 添加到同一组单选按钮中的两个按钮。