如何使用单选输入按钮隐藏/显示不同的页段

Question

我是一个成熟的网页开发人员，只是我的第一个适当的html项目弄湿了我的脚。

我正在构建一个网页，在上面的行中有一个“tab”选项卡，而当前选中的选项卡在主页上显示了一个不同的部分(在未选中时隐藏其他部分)。我在一个由div组成的表中的标签中使用了无线电输入，并定义了所有我认为正确的CSS。(见下文)

但是选项卡不起作用:取决于我更改的内容，每个部分要么同时出现，要么没有。

这是我的HTML：

  <div class="sheet-table">
    <div class="sheet-table-row sheet-candara">
      <div class="sheet-col">
        <label class="container" title="Adventure tab">
          <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab1" value="1">
          <span class="sheet-tabs sheet-tab1 sheet-center">SECTION 1</span>
        </label>
      </div>
      <div class="sheet-col">
        <label class="container" title="Lifestyle tab">
          <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab2" value="2">
          <span class="sheet-tabs sheet-tab2 sheet-center">SECTION 2</span>
        </label>
      </div>
      <div class="sheet-col">
        <label class="container" title="Options tab">
          <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab3" value="3">
          <span class="sheet-tabs sheet-tab3 sheet-center">SECTION 3</span>
        </label>
      </div>
    </div>
  </div>

随后，我有了部分内容(我在这里已经做了注释)：

    <div class="sheet-section-tab1">
    <!-- section 1 'adventure' content -->
    </div>
    <div class="sheet-section-tab2">
    <!-- section 2 'lifestyle' content -->
    </div>
    <div class="sheet-section-tab3">
    <!-- section 3 'options' content -->
    </div>

和CSS (其中一部分是从W3Schools.com复制和编辑的)：

.container {
  display: inline-block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.sheet-tabs {
  position: inherit;
  padding: 0.2em 0.9em;
  z-index: 9999;
}

.container:hover input ~ .sheet-tabs {
  background-color: rgba(30, 20, 20, 0.3);
  border-radius: 0.5em;
  content: attr(title);
}

.container input:checked ~ .sheet-tabs {
  background-color: rgba(30, 20, 20, 0.7);
  color: white;
  border-radius: 0.5em;
}

div[class^="sheet-section"] {
    display: none;
}

.sheet-section-tab1,
.sheet-section-tab2,
.sheet-section-tab3 {
  display: none;
}

input.sheet-tab1:checked ~ div.sheet-section-tab1,
input.sheet-tab2:checked ~ div.sheet-section-tab2,
input.sheet-tab3:checked ~ div.sheet-section-tab3{
  display: block;
}

现在，我在尝试让它工作时发现的奇怪的事情是，当我提取输入并从它们各自的标签和div表中跨出时，它就起作用了，如下所示：

  <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab1" value="1">
  <span class="sheet-tabs sheet-tab1 sheet-center">SECTION 1</span>
  <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab2" value="2">
  <span class="sheet-tabs sheet-tab2 sheet-center">SECTION 2</span>
  <input type="radio" name="attr_tab" class="sheet-tabs sheet-tab3" value="3">
  <span class="sheet-tabs sheet-tab3 sheet-center">SECTION 3</span>

<div class="sheet-section-tab1">
    <!-- section 1 'adventure' content -->
</div>
<div class="sheet-section-tab2">
    <!-- section 2 'lifestyle' content -->
</div>
<div class="sheet-section-tab3">
    <!-- section 3 'options' content -->
</div>

但后来我失去了所有我努力工作的CSS样式.

有什么方法可以在不影响风格的情况下获得我想要的功能，还是我在这里做了一些根本错误的事情？还是我没看到一个简单的错误？谢谢!

(而且，我不知道这是否与任何答案相关，但由于特定于我的托管平台的原因，我不能使用id属性)。

Answer 1

只使用HTML和CSS创建一个标签系统是可能的，但它将是混乱和整体低效的，由于单选按钮需要如何对齐才能实现这一点，页面的样式设计将很困难。我强烈建议使用java脚本来完成您正在做的事情。这里是指向JavaScript选项卡上的HowTo的链接。但是，如果必须通过严格使用HTML和CSS来完成这个项目，请让我知道，我将进行更深入的研究。从现在开始，我可以告诉您的是，可以使用"+“选择器来完成这一任务。以一种方式构造页面，使其在单选按钮和要显示的div/选项卡之间交替显示，如下所示：

radio button
div
radio button
div
radio button
div

这样，单选按钮被分配给它下面的div。现在，您可以通过使用": checked“并使用"+”来锁定选中的单选按钮，这将选择与单选按钮最近的div。这可以使用以下代码在css中实现：

.tabs {
display: none;
}

[name="radiobutton"]:checked + .tab {
display: block;
}

干杯!

Answer 2

您是否尝试添加您的Css溢出:隐藏；