html - 如何仅使用 HTML 和 CSS 创建子选项卡

Question

我有一些仅使用 HTML 和 CSS 的选项卡。 但是，我想在这些选项卡中添加子选项卡。即当我到达 Tab one 时，我在里面发现了另一组标签。 我只知道如何使用 Javascript 执行此操作，但如果整个设置仍然纯粹基于 HTML CSS，我更愿意。

这可能吗？我该怎么做？

下面是第一个选项卡的工作代码。

@import url('https://fonts.googleapis.com/css? 
 family=Open+Sans:400,
600,
700');
 * {
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
  background: white;
}

.tabinator {
  background: white;
  font-family: Open Sans;
  height: 500px;
  width: 100%;
}

.tabinator h2 {
  text-align: center;
  margin-bottom: 20px;
}

.tabinator input {
  display: none;
}

.tabinator label {
  box-sizing: border-box;
  display: inline-block;
  padding: 15px 25px;
  color: #ccc;
  margin-bottom: -1px;
  margin-left: -1px;
}

.tabinator label:before {
  content: '';
  display: block;
  width: 100%;
  height: 15px;
  background-color: #fff;
  position: absolute;
  bottom: -11px;
  left: 0;
  z-index: 10;
}

.tabinator label:hover {
  color: #888;
  cursor: pointer;
}

.tabinator input:checked+label {
  position: relative;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 5px 5px 0 0;
}

.tabinator input:checked+label:after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 15px #939393;
}

#box1,
#box2,
#box3,
#box4 {
  display: none;
  border-top: 1px solid #bbb;
  padding: 15px;
}

#tab1:checked~#box1,
#tab2:checked~#box2,
#tab3:checked~#box3,
#tab4:checked~#box4 {
  display: block;
  box-shadow: 0 0 15px #939393;
}

<div class="tabinator">
  <h2>CSS Tabs</h2>
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab One</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab Two</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab Three</label>
  <input type="radio" id="tab4" name="tabs">
  <label for="tab4">Tab Four</label>
  <div id="box1">
    <p>
      Peace to all worlds
    </p>
  </div>
  <div id="box2">
    <p>
      peace to all worlds 2
    </p>
  </div>
  <div id="box3">
    <p>
      peace to all worlds 3
    </p>
  </div>
  <div id="box4">
    <p>
      peace to all worlds 4
    </p>
  </div>
</div>

Answer 1

我使用类似于以下内容的内容。您不需要在 CSS 中使用带有数字的额外 id

.tabbed {
  display: flex;
  flex-wrap: wrap;
}
.tabbed > input {
  display: none;
}
.tabbed > input:checked + label {
  background-color: silver;
}
.tabbed > input:checked + label + div {
  display: block;
}
.tabbed > label {
  order: 1;
  flex-grow: 1;
  padding: 10px;
}
.tabbed > div {
  order: 2;
  flex-basis: 100%;
  display: none;
  padding: 10px;
}

/* For presentation only */
.container {
  width: 600px;
  margin: 0 auto;
  background-color: gold;
}

.tabbed {
  border: 1px solid;
}

hr {
  background-color: white;
  height: 5px;
  border: 0;
  margin: 10px 0 0;
}
hr + * {
  margin-top: 10px;
}
hr + hr {
  margin: 0 0;
}

<div class="container">
  <div class="tabbed">
    <input type="radio" id="tabbed-tab-1-1" name="tabbed-tab-1" checked><label for="tabbed-tab-1-1">Tab 1</label>
    <div>
      <div class="tabbed">
        <input type="radio" id="tabbed-tab-1-1-1" name="tabbed-tab-1-1" checked><label for="tabbed-tab-1-1-1">Tab 1</label>
        <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vitae nulla unde nobis accusamus voluptate porro optio ut enim explicabo et, quasi qui neque laudantium hic! Molestias reprehenderit qui, tempora, ipsum quod sit officiis maxime reiciendis cumque vero repellendus, sunt doloremque? Culpa asperiores tenetur, vero optio vel dolores voluptas voluptate.</p></div>
        <input type="radio" id="tabbed-tab-1-1-2" name="tabbed-tab-1-1"><label for="tabbed-tab-1-1-2">Tab 2</label>
        <div><p>Nobis repudiandae et atque facilis delectus, eligendi molestias beatae recusandae est perferendis illum officia ullam labore, iste tempore quidem unde consequatur exercitationem animi! Accusamus ab vero maiores eaque, animi possimus aliquam repellendus corrupti et! Quaerat nihil inventore velit nisi. Assumenda maxime dolorum saepe itaque dolores rerum dolore nostrum, fuga omnis!</p></div>
      </div>
    <hr>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam minus praesentium perferendis in nemo odit voluptate quo labore dicta consequuntur commodi beatae facere vitae quod cum impedit tempora qui ipsam perspiciatis recusandae numquam, illum facilis soluta! Nihil neque repudiandae ipsa minus illum, ea dolores beatae necessitatibus dolor at modi? Accusamus.</p></div>
    <input type="radio" id="tabbed-tab-1-2" name="tabbed-tab-1"><label for="tabbed-tab-1-2">Tab 2</label>
    <div><p>Tempore odit asperiores, corrupti nulla repellat laudantium deserunt natus optio culpa quibusdam beatae dolorum? Laboriosam repudiandae id iusto eveniet, animi cupiditate aperiam perferendis! Aperiam, soluta architecto distinctio cupiditate dolores, quisquam ab magni quae non praesentium quia veritatis, rerum inventore adipisci. Quis minus eius, voluptas cum animi totam nesciunt alias eaque!</p></div>
    <input type="radio" id="tabbed-tab-1-3" name="tabbed-tab-1"><label for="tabbed-tab-1-3">Tab 3</label>
    <div><p>Reiciendis beatae odio doloribus nobis ab ut, qui animi expedita quaerat quisquam sapiente dolores laudantium numquam consequatur impedit quos debitis eos asperiores eaque sunt delectus iure nisi perferendis? Id nostrum magni repellat animi aliquam aspernatur dolores fugit aut nobis dolorem, saepe aliquid vitae, ipsa est perferendis ducimus? Qui, facere obcaecati.</p></div>
  </div>

  <hr><hr>

  <div class="tabbed">
    <input type="radio" id="tabbed-tab-2-1" name="tabbed-tab-2" checked><label for="tabbed-tab-2-1">Tab 1</label>
    <div><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam commodi aut accusantium nulla ex delectus? Consectetur velit eum corrupti vel molestias corporis non perferendis? Ratione, dicta. Repudiandae, illum officia! Fugit, distinctio corporis labore nam laborum consectetur minima facere enim quis error fuga adipisci ducimus molestiae officiis beatae odio ad consequatur!</p></div>
    <input type="radio" id="tabbed-tab-2-2" name="tabbed-tab-2"><label for="tabbed-tab-2-2">Tab 2</label>
    <div><p>Vero ad temporibus ipsam commodi accusantium necessitatibus, dicta ea ullam, similique itaque doloribus id eos nisi porro dolores modi excepturi! Perferendis assumenda nisi, dolores hic laudantium facere. Minima autem explicabo exercitationem harum illo blanditiis quaerat vel voluptatem voluptate ducimus sequi repudiandae, beatae dolore eum corporis deserunt reprehenderit rem adipisci accusantium.</p></div>
    <input type="radio" id="tabbed-tab-2-3" name="tabbed-tab-2"><label for="tabbed-tab-2-3">Tab 3</label>
    <div><p>Totam, temporibus. Totam labore velit repellendus excepturi dolor asperiores, aut tenetur esse quas distinctio molestias at, perferendis odit architecto officia tempora nihil nobis ullam? Labore, earum. Ratione sit quaerat eligendi eum numquam commodi officiis dolore assumenda doloribus amet. Magni tempore culpa quae velit ex animi veniam pariatur sequi, ab reprehenderit.</p></div>
    <input type="radio" id="tabbed-tab-2-4" name="tabbed-tab-2"><label for="tabbed-tab-2-4">Tab 3</label>
    <div><p>Totam, temporibus. Totam labore velit repellendus excepturi dolor asperiores, aut tenetur esse quas distinctio molestias at, perferendis odit architecto officia tempora nihil nobis ullam? Labore, earum. Ratione sit quaerat eligendi eum numquam commodi officiis dolore assumenda doloribus amet. Magni tempore culpa quae velit ex animi veniam pariatur sequi, ab reprehenderit.</p></div>
  </div>
</div>