html - 一键激活两个标签

Question

我正在尝试使用“复选框 hack”进行选项卡组设计。单击一个选项卡(标签)会选中一个单选框。然后使用 ~ 选择器我可以在显示之间切换页面: block /无；

为了说明此设置，首先是一行选项卡按钮，然后是一行页面。单选框作为页面容器中的 sibling 存在。

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

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

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

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

我已经让第二个“checkbox hack”起作用了，但现在我似乎无法同时执行这两个功能。选项卡的构建方式如下:

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