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

Question

我是一名成熟的 Web 开发人员，刚刚接触我的第一个 正确的 html 项目。

我正在尝试构建一个网页，其中您在顶行有一个 'tab' 选择，并且当前选择的选项卡在主页上显示不同的部分（未选择时隐藏其他部分）。我在由 div 组成的 table 中使用标签内的无线电输入完成了此操作，并定义了我认为正确的所有内容 CSS。（见下文）

但是这些选项卡不起作用：根据我所做的更改，要么每个部分同时显示，要么 none 个部分显示。

这是我的 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 tables，像这样：

  <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 脚本来完成您正在做的事情。 Here 是 link 到 JavaScript 选项卡上的操作方法。但是，如果必须通过严格使用 HTML 和 CSS 来完成此项目，请告诉我，我会进行更深入的研究。从现在开始，我可以告诉您的是，实现此目的的一种可能方法是使用“+”selector。以某种方式构建页面，使其在单选按钮和要显示的 div/tab 之间交替，如下所示：

radio button
div
radio button
div
radio button
div

这样，单选按钮就分配给了它下面的 div。现在您可以通过使用“:checked”然后使用“+”来定位选中的单选按钮，这将使select最接近单选按钮div。这可以在 css 中使用以下代码完成：

.tabs {
display: none;
}

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

干杯！

Answer 2

您是否尝试过在 Css overflow:Hidden;

中添加

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

How to hide / display different page sections with radio input buttons

html

css

label

radio-button