Question

因此，我有一个动态加载的HTML，无法更改。我的任务是为手机制作手风琴视图。生成的HTML看起来像

<div class="vitals-tabs-container"><ul class="tabs"><li data-tab="tab-0" class="tab-link current">Description</li><li data-tab="tab-1" class="tab-link ">tab 2</li><li data-tab="tab-2" class="tab-link ">tab 3</li><li data-tab="tab-4" class="tab-link">Tab 1</li></ul><div id="tab-0" class="tab-content current">
          <p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
</div><div id="tab-1" class="tab-content ">
<p>I love bacon and I like to eat a whole pizza by myself,because, I won't gain weight no matter what.Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
</div><div id="tab-2" class="tab-content ">
<p>Hello, I don't even know what I should write so I know this is the third tab,lol.Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>
<p>Illo quaerat error aut amet non dolor quam ducimus officiis. Voluptates voluptas qui praesentium. Eos sit laudantium maiores vel quo itaque voluptas illum corrupti.</p>

</div><div id="tab-4" class="tab-content">Ayyyyyyyyyy</div></div>

基本上li表示带有标签名称的“标题”，而div表示每个标签的内部文字我在CSS中尝试过的方法并没有真正起作用，我的意思是，它仅显示我想要的选项卡，但使用所有名称显示，我想显示其标题下的内容，而不显示所有4个名称。这是CSS

.tab-link {
 font-weight: 400;
 font-size: 19px;
 padding: 15px 15px 15px 0px;
  display: flex;
  line-height: 25px;
}

.tab-content {
  display:none;
}

.tab-content.current {
  display:block;
}

这是一张图片 https://gyazo.com/2361538194f8a587c2352d2dd61b2454

Answer 1

对不起，我的错，我忘了你只想使用纯CSS

然后解决方案很简单，请在此处进行检查：仅HTML和纯CSS

https://getbootstrap.com/docs/4.0/components/collapse/

并向下滚动至手风琴示例

您唯一需要的就是bootstrap libary！

这里也是一个很好的完美解决方案：

https://stackoverflow.com/a/18568997/7036972

希望这会有所帮助

纯CSS手风琴

1 个答案: