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

时间:2019-06-24 06:40:25

标签: html css

我有一些仅使用HTML和CSS的标签。 但是,我想在这些选项卡中添加子选项卡。即,当我进入选项卡一个时,我在里面找到另一组选项卡。 我只知道如何使用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>

4 个答案:

答案 0 :(得分:2)

此解决方案与纯CSS结合使用。您可以按照以下步骤简化代码。

.tabs {
  position: relative;
  clear: both;
}

.tabs .tab {
  float: left;
}

.tabs .tab .content {
  position: absolute;
  background-color: white;
  left: 0px;
  width: 100%;
}

.tab label {
  margin-right: 10px;
}

.checkboxtab:checked~.content {
  z-index: 1;
}
<div class="tabinator">
  <h2>CSS Tabs</h2>

  <div class="tabs">
    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox1" class="checkboxtab" checked>
      <label for="checkbox1">Tab One</label>
      <div class="content">
        Peace to all worlds 1
      </div>
    </div>

    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox2" class="checkboxtab">
      <label for="checkbox2">Tab Two</label>
      <div class="content">
        peace to all worlds 2
      </div>
    </div>

    <div class="tab">
      <input name="checkbox-tabs-group" type="radio" id="checkbox3" class="checkboxtab">
      <label for="checkbox3">Tab Three</label>
      <div class="content">
        peace to all worlds 3
      </div>
    </div>
  </div>

答案 1 :(得分:2)

使用以下代码,您可以在不使用javascript的情况下实现多标签:

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
<main>
  
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Codepen</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Dribbble</label>
  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Stack Overflow</label>

  <section id="content1">
    <p>
     test1
    </p>
  </section>
  <section id="content2">
    <p>
  test2
    </p>
  </section>
  <section id="content3">
    <p>
     test3
    </p>
  </section>
</main>

答案 2 :(得分:1)

我不确定这是您的目标,但是我仅使用HTML和CSS为前两个选项卡创建了子选项卡。

/*
  When level 1 tab is not selected, hide sub tabs
*/

#tab1:not(:checked)~#sub1,
#tab2:not(:checked)~#sub2 {
  display: none;
}


/*
  When level 1 tab is selected, display relevant sub tabs
*/

#tab1:checked~#sub1,
#tab2:checked~#sub2 {
  display: inline-block;
}
<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>
  <br>
  <div id="sub1">
    <input type="radio" id="sub1tab1" name="sub1tabs">
    <label for="sub1tab1">Sub 1 Tab One</label>
    <input type="radio" id="sub1tab2" name="sub1tabs">
    <label for="sub1tab2">Sub 1 Tab Two</label>
  </div>
  <div id="sub2">
    <input type="radio" id="sub2tab1" name="sub2tabs">
    <label for="sub2tab1">Sub 2 Tab One</label>
    <input type="radio" id="sub2tab2" name="sub2tabs">
    <label for="sub2tab2">Sub 2 Tab Two</label>
  </div>
  <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>

答案 3 :(得分: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>