一键激活两个标签

Question

我正在尝试使用“复选框黑客”进行标签组设计。 单击一个选项卡（标签）将选中一个单选框。然后使用〜选择器，我可以在显示之间切换页面：块/无；

为说明此设置，首先是一排标签按钮，然后是一行页面。单选框在页面容器中作为同级对象存在。

+-------------------+
| +------+ +------+ |
| | tab1 | | tab2 | |
| +------+ +------+ |
+-------------------+
| +---------------+ |
| |     page 1    | |
| +---------------+ |
| +---------------+ |
| |     page 2    | |
| +---------------+ |
+-------------------+

此主要功能正常运行，页面按预期换出。

现在下一部分，我遇到麻烦了...

当您单击一个选项卡时，我需要更改它的css以使其看起来为“选定”。由于单选框位于页面容器中，因此我不能使用它们和同级选择器自行设置选项卡的样式。似乎我需要另一组单选按钮，这次是在tabs容器中。

我已经有了第二个“复选框黑客”，但是现在我似乎无法同时执行这两个功能。 标签的构建方式如下：

<label for='tab_selector_1'>
    <input id='tab_selector_1' type='radio'/>
    <label for='page_selector_1' id='tab_1'>TAB NAME</label>
</label>

我希望单击可以使两个标签冒泡并激活两个复选框，但是它仅作用于最深的标签。在这种情况下，仅切换页面，而不切换选项卡样式。

是否有某种方法可以重组它，或使用不同的CSS选择器使其工作？如果这是一个不好的方法，则可以更改html，我只需要将其作为非js解决方案即可。

演示：https://codepen.io/sammurphey/pen/RebNYo

Answer 1

<input type="radio">高和隐藏

将单选按钮置于要切换样式并为其分配display:none的元素的更高位置。

示例

<form>
    <input id='tab0' type='radio'> <!--#tab0 ~ fieldset > legend > [for=tab0] -->
    <input id='tab1' type='radio'> <!--#tab1 + fieldset > legend > [for=tab1] -->
      <fieldset>
         <legend>
            <label for='tab0'>Page 0</label>
            <label for='tab1'>Page 1</label>
         </legend>

注意：您只需一个<label>和一个<input>即可为标签页及其对应的页面设置样式。已发布是此模式的功能齐全的演示，并链接到重构的OP代码的分支。

---

CODEPEN

演示

html,
body {
  width: 100&;
  height: 100%;
}

.tab {
  display: none
}

.tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs label {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tabs label:hover {
  background-color: #ddd;
}

#tab0:checked~fieldset .tabs>[for=tab0],
#tab1:checked+fieldset>.tabs>[for=tab1] {
  background-color: #ccc;
}

.page {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

#tab0:checked~fieldset>#page0,
#tab1:checked+fieldset>#page1 {
  display: block;
}

<main>

  <form id='ui'>


    <input id='tab0' class='tab' name='tab' type='radio' checked='true'>
    <input id='tab1' class='tab' name='tab' type='radio'>

    <fieldset>
      <legend class="tabs">
        <label for='tab0' class='btn'>Page 0</label>
        <label for='tab1' class='btn'>Page 1</label>
      </legend>
      <section id='page0' class='page'>
        <article>
          <h1>Page 0 Content</h1>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
      </section>

      <section id='page1' class='page'>
        <article>
          <h1>Page 1 Content</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </article>
      </section>


    </fieldset>
  </form>

</main>