Question

我将纯CSS标签与纯CSS手风琴相结合。以下是来源：

手风琴： https://codepen.io/raubaca/pen/PZzpVe
标签： https://css-tricks.com/css3-tabs/

我在第一个标签上有一个纯CSS手风琴。问题是当手风琴在第一个标签中打开并且选择了另一个标签时，用户可以看到下面打开的手风琴。当选择另一个标签时，如何折叠手风琴？

https://jsfiddle.net/Lance_Bitner/ybtqm1hq/

<div class="w3c">
<div id="tab16">
<a href="#tab16">Tab 16</a>
<div>    
  <div class="tab">
    <input id="tab-one" type="checkbox" name="tabs">
    <label for="tab-one">Introduction to SharePoint</label>
    <div class="tab-content">
      <div>
        <div class="column2">
          <a href=""><img src="../images/classroom1.png"></a>
          <a href=""><img src="../images/document1.png"></a>
          <a href=""><img src="../images/presentation1.png"></a>
          <a href=""><img src="../images/video1.png"></a>
        </div>
      </div>
    </div>
  </div>
  <div class="tab">
    <input id="tab-two" type="checkbox" name="tabs">
    <label for="tab-two">Label Two</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
  <div class="tab">
    <input id="tab-three" type="checkbox" name="tabs">
    <label for="tab-three">Label Three</label>
    <div class="tab-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
    </div>
  </div>
</div>
 </div>
<div id="tab17">
<a href="#tab17">Tab 17</a>
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
<a href="#tab18">Tab 18</a>
<div>... that 2 should have been enough, but...</div>
</div>
</div>

Answer 1

使用输入类型广播代替复选框。

<input id="tab-four" type="radio" name="tabs2">

您可以在此处查看示例：https://codepen.io/raubaca/pen/PZzpVe

干杯。

当选择不同的选项卡时，如何使CSS手风琴折叠？

1 个答案: