一键激活两个标签

Question

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

为了说明此设置，首先是一排标签按钮，然后是一排页面。单选框在页面容器中作为兄弟姐妹存在。

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

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

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

当您单击一个选项卡时，我需要将它的 css 更改为“选中”。由于单选框位于页面容器中，因此我无法使用它们和同级选择器来设置标签本身的样式。看来我需要另一组单选按钮，这次是在选项卡容器中。

我已经完成了第二个“复选框破解”，但现在我似乎无法同时执行这两个功能。 标签的构建如下：

<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>